<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{ margin: 0; padding: 0;}
li{ list-style: none;}
a{ text-decoration: none;}
#banner{ width: 960px; height: 320px; margin: 100px auto 0; border:1px solid #000; position: relative; overflow: hidden;}
#banner ul{ height: 320px; position: absolute; top:0; left:0}
#banner ul li{ width: 960px; height: 320px; float: left;}
#banner a{ display: block; width: 60px; height: 80px; position: absolute; top: 50%; margin-top: -40px;}
#banner .prev{ background: url(./img/btn_show.png) no-repeat 0 -80px; left:0}
#banner .next{ background: url(./img/btn_show.png) no-repeat 0 0; right:0}
#banner p{ position: absolute; left: 0; bottom: 20px; height: 20px; width: 100%; text-align: center;}
#banner p span{ width: 20px; height: 20px; display: inline-block; border-radius: 50%; background: #fff; margin: 0 8px;}
#banner p span.on{ background: red;}
</style>
<script src="./move-final.js"></script>
<script>
window.onload = function(){
var oDiv = document.getElementById('banner');
var oUl = oDiv.getElementsByTagName('ul')[0];
var aLi = oUl.getElementsByTagName('li');
var aBtn = oDiv.getElementsByTagName('a');
var aSpan = oDiv.getElementsByTagName('span');
var n = 0;// 记录当前播放到第几张 而且 统一由n来管理播放到第几张 也就是说 任何值改变了播放的张数 都要赋值给n 由n来操作
var timer = null;
// ul设置宽度
var iW = aLi[0].offsetWidth;
var len = aLi.length;//li的个数 5 下标是 0-4
oUl.style.width = iW * len + 'px';
// 点击下一张
aBtn[1].onclick = function(){
play();
}
function play(){
n++; //n自增 代表播放到下一张
if(n >= len){
n = 1;//播出下标为1的图片
// 将ul直接 定位到left为0 以备播放到下标为1的图片
oUl.style.left = 0;
}
bufferMove(oUl,{left: -iW * n});
for(var i = 0; i < aSpan.length; i++){
aSpan[i].className = '';
}
if(n == len - 1){
aSpan[0].className = 'on';
}else{
// span的第n个 代表 当前播放的图片 对应下标的span
aSpan[n].className = 'on';
}
}
aBtn[0].onclick = function(){
n--;
if(n < 0){
n = len - 2;
oUl.style.left = (len - 1) * -iW + 'px';
}
bufferMove(oUl,{left: -iW * n});
for(var i = 0; i < aSpan.length; i++){
aSpan[i].className = '';
}
aSpan[n].className = 'on';
}
// 先直接设置定时器 让轮播图 可以自动播放
timer = setInterval(play,3000);
// 鼠标 移入 清除定时器 移开 重新添加
oDiv.onmouseenter = function(){
clearInterval(timer);
}
oDiv.onmouseleave = function(){
timer = setInterval(play,3000);
}
for(var i = 0; i < aSpan.length; i++){
aSpan[i].index = i;
aSpan[i].onclick = function(){
if(n == len - 1){
n = 0;
oUl.style.left = 0;
}
n = this.index;//将index赋值给n 统一管理播放到第几张
for(var i = 0; i < aSpan.length; i++){
aSpan[i].className = '';
}
aSpan[n].className = 'on';
bufferMove(oUl, {left: -iW * n});
}
}
}
</script>
</head>
<body>
<div id="banner">
<ul>
<li><img src="img/1.jpg" alt=""></li>
<li><img src="img/2.jpg" alt=""></li>
<li><img src="img/3.jpg" alt=""></li>
<li><img src="img/4.jpg" alt=""></li>
<li><img src="img/1.jpg" alt=""></li>
</ul>
<a href="javascript:;" class="prev"></a>
<a href="javascript:;" class="next"></a>
<p>
<span class="on"></span>
<span></span>
<span></span>
<span></span>
</p>
</div>
</body>
</html>