分享一个用原生JS实现轮播图特效， 效果如下：
以下是代码实现，详情请看注释：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>原生JS实现轮播图</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
border: 0;
}
.box {
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: 0px;
width: 3000px;
}
.box ol {
position: absolute;
right: 10px;
bottom: 10px;
line-height: 20px;
text-align: center;
}
.box ol li {
float: left;
width: 20px;
height: 20px;
background: #fff;
border: 1px solid #ccc;
margin-left: 10px;
cursor: pointer;
}
.box ol li.current {
background: yellow;
}
#arrow {
display: none;
}
#arrow span {
width: 40px;
height: 40px;
position: absolute;
left: 5px;
top: 50%;
margin-top: -20px;
background: #000;
cursor: pointer;
line-height: 40px;
text-align: center;
font-weight: bold;
font-family: '黑体';
font-size: 30px;
color: #fff;
opacity: 0.3;
border: 1px solid #fff;
}
#arrow #right {
right: 5px;
left: auto;
}
</style>
</head>
<body>
<div class="box" id='box'>
<div class="screen">
<ul>
<li><img src="images/0.png" width="500" height="200" /></li>
<li><img src="images/1.png" width="500" height="200" /></li>
<li><img src="images/2.png" width="500" height="200" /></li>
<li><img src="images/3.png" width="500" height="200" /></li>
<li><img src="images/4.png" width="500" height="200" /></li>
</ul>
<!-- 动态创建的小方块，添加在这里，样式已经给写好了-->
<ol></ol>
</div>
<div id="arrow">
<span id="left"><</span>
<span id="right">></span>
</div>
</div>
<script>
// 外层容器
var box = document.getElementById("box");
// 可视区域
var screen = box.children[0];
var ul = screen.children[0];
var ulList = ul.children;
// 数字下标
var ol = screen.children[1];
// 左右的箭头
var arrow = box.children[1];
var arrowLeft = arrow.children[0];
var arrowRight = arrow.children[1];
// 所有图片宽度
var imgWidth = screen.offsetWidth;
// 创建小方块部分
for (var i = 0; i < ulList.length; i++) {
var li = document.createElement("li");
ol.appendChild(li);
li.innerHTML = i + 1;
};
// 设置样式，默认显示第一个
var olList = ol.children;
olList[0].className = "current";
// 点击按钮变色,同时设置list进行运动
for (var i = 0; i < olList.length; i++) {
olList[i].index = i;
// 点击事件
olList[i].onclick = function () {
// 如果当前显示的是最后一张将其拉回来
if (position == ulList.length - 1) {
ul.style.left = 0 + "px";
};
for (var i = 0; i < olList.length; i++) {
olList[i].className = "";
};
this.className = "current";
// 点击按钮的时候设置ul滚动
var target = -this.index * imgWidth;
animate(ul,target);
// 跟索引值同步
position = this.index;
};
}
// 克隆第一张图片保证点击按钮时无缝滚动
var img = ulList[0].cloneNode(true);
ul.appendChild(img);
// 点击效果
var position = 0;
// 右箭头点击
arrowRight.onclick = function () {
// 如果是最后一张拉回来
if (position == ulList.length - 1) {
ul.style.left = 0 + "px";
position = 0;
};
position++;
animate(ul, -position * imgWidth);
// 设置对应的按钮进行变色
for (var i = 0; i < olList.length; i++) {
olList[i].className = "";
};
// 由于position可能到5，ulList的元素个数比olList的个数多1
// 所以显示动态添加最后一张时显示第一个按钮
if (position == ulList.length - 1) {
olList[0].className = "current";
} else {
olList[position].className = "current";
}
};
// 左箭头点击
arrowLeft.onclick = function () {
// 如果当前已经是第一张了拉动到添加的最后一张
if (position == 0) {
ul.style.left = -(ul.offsetWidth - imgWidth) + "px";
position = ulList.length - 1;
}
// 先跑起来
position--;
animate(ul, -position * imgWidth);
// 对应按钮显示
for (var i = 0; i < olList.length; i++) {
olList[i].className = "";
}
// 因为position的作用是表示当前滚过的图片张数
// 但是点击左按钮的时候没有机会停在假的第一张上
olList[position].className = "current";
};
// 自动运行
var timer = null;
timer = setInterval(function () {
arrowRight.click();
}, 2500);
// 鼠标移入
box.onmouseover = function () {
arrow.style.display = "block";
// 停止自动播放
clearInterval(timer);
};
// 鼠标移出
box.onmouseout = function () {
arrow.style.display = "none";
// 开启自动播放
timer = setInterval(play, 2500);
};
// 播放函数
function play() {
// 如果是最后一张拉回来
if (position == ulList.length - 1) {
ul.style.left = 0 + "px";
position = 0;
}
position++;
animate(ul, -position * imgWidth);
// 设置对应的按钮进行变色
for (var i = 0; i < olList.length; i++) {
olList[i].className = "";
}
// 由于position可能到5，ulList的元素个数比olList的个数多1
// 所以显示动态添加最后一张时显示第一个按钮
if (position == ulList.length - 1) {
olList[0].className = "current";
} else {
olList[position].className = "current";
}
}
// 缓动动画
function animate(tag, target) {
clearInterval(tag.timer);
tag.timer = setInterval(function () {
var leader = tag.offsetLeft;
var step = (target - leader) / 10;
// 取整操作
step = step > 0 ? Math.ceil(step) : Math.floor(step);
leader = leader + step;
tag.style.left = leader + "px";
// 清除定时
if (leader == target) {
clearInterval(tag.timer);
}
}, 20);
}
</script>
</body>
</html>
