js实现轮播图功能
代码：
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>路人女主无缝轮播图片</title>
</head>
<body>
<div class=”box” id=”box”>
<ul>
<li><img src=”images/xia1.png”></li>
<li><img src=”images/xia2.png”></li>
<li><img src=”images/xia3.png”></li>
<li><img src=”images/xia4.png”></li>
<li><img src=”images/xia5.png”></li>
<li><img src=”images/xia6.png”></li>
<li><img src=”images/xia7.png”></li>
<li><img src=”images/xia8.png”></li>
</ul>
<ol>
</ol>
</div>
<div class=”content”>
<p>1.鼠标离开图片开始自动轮播，鼠标放在图片上停止自动轮播。</p>
<p>2.通过小圆圈可以控制要显示的图片</p>
</div>
</body>
</html>
<style type=”text/css”>
* {
margin: 0;
padding: 0;
}
.box {
width: 1280px;
height: 720px;
margin: 50px auto;
position: relative;
overflow: hidden;
}
.box ul {
width: 900%;
position: absolute;
top: 0;
left: 0;
}
.box li {
list-style: none;
vertical-align: top;
float: left;
}
.box ol {
list-style: none;
position: absolute;
bottom: 10px;
left: 50%;
margin-left: 0;
}
.box ol li {
width: 30px;
height: 30px;
border: 1px solid #ccc;
border-radius: 50%;
background-color: #fff;
line-height: 30px;
text-align: center;
margin-left: 10px;
cursor: pointer;
}
.box ol li.current {
background-color: #ff0;
}
.content {
width: 1280px;
margin: 0 auto;
text-align: center;
}
</style>
<script type=”text/javascript”>
window.onload = function() {
var box = document.getElementById(“box”);
var ul = box.children[0];
var ol = box.children[1];
var ulLis = ul.children;
//1.封装 轮播函数
function animate(obj, target) { // 第一个参数 要运动的盒子 第二个参数 要位移的距离
clearInterval(obj.timer); //运行计时器 先停止计时器
var speed = obj.offsetLeft > target ? -1280 : 1280; //计算 步长 与 位移方向
obj.timer = setInterval(function() { // obj.timer 为全局变量
if (obj.offsetLeft == target) {
clearInterval(obj.timer);
} else {
obj.style.left = obj.offsetLeft + speed + “px”;
}
}, 30)
}
//封装 轮播函数
//2.复制第一张图做无缝轮播 克隆节点 lis[0].cloneNode(true); true 深克隆
ul.appendChild(ulLis[0].cloneNode(true)); // 向父节点追加子节点 复制完成
//3.动态生成ol里的li
for (i = 0; i < ulLis.length-1; i++) { //利用for循环来添加li 因为之前克隆了一个节点 所以长度减一
var li = document.createElement(“li”); //创建节点 li
li.innerHTML = i + 1; //创建节点li 的内容
ol.appendChild(li); // ol 插入 li
}
ol.style.marginLeft = -ol.offsetWidth/2 + “px”; //ol动态居中
//4.ol li的动画部分
var olLis = ol.children;
olLis[0].className = “current”;
for (var i = 0; i < olLis.length; i++) {
olLis[i].index = i; // 赋予索引号
olLis[i].onmouseover = function () {
for (var j = 0; j < olLis.length; j++) { //清除所以li的class
olLis[j].className = “”;
}
this.className = “current”; //利用this 修改调用函数的li的类名
animate(ul,-this.index*box.offsetWidth);//利用this.index调用索引号
key = square = this.index; //鼠标经过ol li时 统一控制轮播的值
}
}
//5.自动轮播部分 autoplay 图片和ol li一起自动轮播
var timer = null; //全局定义计时器
var key = 0; // 利用key值控制自动轮播 key=位移了几张图片
var square = 0; //利用square控制ol li自动轮播
timer = setInterval(autoplay,2000); //定义autoplay函数 方便调用
//5.1图片自动轮播部分
function autoplay () {
key++; //key=ulLis.length-1时，已经轮播到最后一张图即为第一张图此时square = 0
if (key>=ulLis.length) { //key=ulLis.length时，
key = 1; //应该从第一张图轮播到第二张图所以 令 key = 1
ul.style.left = 0; //图片从最右拉到最左
}
animate(ul,-key*box.offsetWidth);
//5.2ol li自动轮播部分
square++;
square = square >= olLis.length ? 0:square;
for (var i = 0; i < olLis.length; i++) {
olLis[i].className = “”
}
olLis[square].className = “current”;
}
//6.鼠标经过box盒子时，停止自动轮班。鼠标离开时开启自动轮播
box.onmouseover = function () {
clearInterval(timer);
}
box.onmouseout = function () {
timer = setInterval(autoplay,2000); //调用autoplay函数
}
}
</script>
运行效果：