轮播图
轮播图
无缝循环思路：
到最后一张时，把第一张克隆一份放到后面，点击下一张，则显示了第一张（新）。
这个时候，迅速把整个图片ul移动到最开始的第一张（旧），好像没有发生变化一样，之后就又可以重新滚动了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0; /*注意清除！否则动画设置offsetWidth时移动步长会有问题*/
padding: 0;
}
.all {
width: 500px;
height: 200px;
padding: 7px;
border: 1px solid #ccc;
margin: 100px auto;
position: relative;
}
.screen {
width: 500px;
height: 200px;
overflow: hidden;
position: relative;
}
.screen li {
width: 500px;
height: 200px;
overflow: hidden;
float: left;
}
.screen ul {
position: absolute;
left: 0;
top: 0;
width: 3000px;
}
.all ol {
position: absolute;
right: 10px;
bottom: 10px;
line-height: 20px;
text-align: center;
}
.all ol li {
float: left;
width: 20px;
height: 20px;
background: #fff;
border: 1px solid #ccc;
margin-left: 10px;
cursor: pointer;
}
.all ol li.current {
background: yellow;
}
#arr {
display: none;
background-color: red;
z-index: 1000;
}
#arr span {
width: 40px;
height: 40px;
font-size: 30px;
color: #fff;
opacity: 0.5;
text-align: center;
line-height: 40px;
background-color: #000;
font-weight: bold;
cursor: pointer;
position: absolute;
left: 5px;
top: 50%;
margin-top: -20px;
}
#arr #right {
right: 5px;
left: auto;
}
</style>
</head>
<body>
<div class="all" id="box">
<div class="screen">
<ul>
<li><img src="img/l1.jpg" alt=""></li>
<li><img src="img/l2.jpg" alt=""></li>
<li><img src="img/l3.jpg" alt=""></li>
<li><img src="img/l4.jpg" alt=""></li>
<li><img src="img/l5.jpg" alt=""></li>
</ul>
<!-- 序号-->
<ol>
</ol>
</div>
<div id="arr"><span id="left"><</span><span id="right">></span></div>
</div>
<script src="animate.js"></script>
<script>
var box = document.getElementById('box');
var screen = box.children[0];
var arr =document.getElementById('arr');
var ul = screen.children[0];
var ol = screen.children[1];
var arrleft = document.getElementById('left');
var arrright = document.getElementById('right');
var count = ul.children.length;
var imgWidth = screen.offsetWidth;
for(var i=0; i<count; i++) {
var li = document.createElement("li"); //动态生成li
ol.appendChild(li);
li.innerText = i+1;
li.onclick = liClk;
li.setAttribute('index', i);
}
var index=0;
function liClk() {
for(var i=0;i<ol.children.length;i++) {
var li = ol.children[i];
li.className = ''; //取消现有的高亮
}
this.className = 'current'; //当前点击的高亮显示
//相较初始位置，切换到每张图片需要移动的距离刚好是图片宽度×经过的张数，即标识index
index = parseInt(this.getAttribute('index'));
animate(ul, -index*imgWidth);
}
ol.children[0].className = "current"; //高亮显示
box.onmouseenter = function () {
arr.style.display = 'block';
clearInterval(timer); //鼠标移上，停止自动播放
};
box.onmouseleave = function () {
arr.style.display = 'none';
timer = setInterval(function () {
arrright.click();
},2000);
};
//var distance = 0; 此变量和前面的index作用类似。打开页面时显示的是第一张，标识为0，之后点击右，distance就会增加，显示第二张图片时变成了1
arrright.onclick = function () {
if(index===count){
ul.style.left = 0+'px';
index = 0;
}
if(index<count){
index++;
//法1：单独实现一遍
// animate(ul, -distance*imgWidth);
// for(var i=0;i<ol.children.length;i++) {
// var li = ol.children[i];
// li.className = '';
// }
// ol.children[distance].className = 'current';
if(index===count){ //要移动到克隆图片，没办法用模拟点击，必须用animate
animate(ul, -index*imgWidth);
for(var i=0;i<ol.children.length;i++) {
var li = ol.children[i];
li.className = '';
}
ol.children[0].className = 'current';
}
else
ol.children[index].click(); //法2：点击右相当于点击下面的序号
}
};
arrleft.onclick = function () {
//如果当前是第一张，要偷偷切换到clone图
if(index===0){
index = count;
ul.style.left = -index * imgWidth + 'px';
}
index--;
//animate(ul,-distance*imgWidth);
ol.children[index].click();
};
//无缝滚动
var firstimg = ul.children[0];
//cloneNode()复制节点 参数：true 复制节点中的内容 false 只复制当前接待你，不复制内容
var clone = firstimg.cloneNode(true);
ul.appendChild(clone);
var timer = setInterval(function () { //自动播放
arrright.click();
},2000);
</script>
</body>
</html> function animate(element, target) {
if(element.timeId) { //判断是否已经有了定时器，有则去掉，以防多次点击开启多个定时器
clearInterval(element.timeId);
}
element.timeId = setInterval(function () {
var step = 16; //步进长度
var current = element.offsetLeft; //盒子当前的位置
if(current>target) { //比目标位置大，反向移动
step = - Math.abs(step);
}
if(Math.abs(current-target)<Math.abs(step)){ //位置在一步长度之内，认为已经到达目标
clearInterval(element.timeId); //清除定时器
element.style.left = target + 'px'; //设置为目标位置
return;
}
current += step; //移动
element.style.left = current + 'px';
},30);
} 
投递学而思等公司9个岗位 >
快手公司福利 720人发布