功能：
- 自动轮播
- 箭头向左向右切换
- 小圆点点击切换
html:
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
<script src="js/index.js" type="text/javascript" > </script>
</head>
<body>
<div id="container">
<ul id="banner">
<li>
<a href="#">
<img src = "img/5.jpeg" />
</a>
</li>
<li>
<a href="#">
<img src = "img/1.jpg" />
</a>
</li>
<li>
<a href="#">
<img src = "img/2.jpg" />
</a>
</li>
<li>
<a href="#">
<img src = "img/3.jpg" />
</a>
</li>
<li>
<a href="#">
<img src = "img/4.jpg" />
</a>
</li>
<li>
<a href="#">
<img src = "img/5.jpeg" />
</a>
</li>
<li>
<a href="#">
<img src = "img/1.jpg" />
</a>
</li>
</ul>
<div id = "dots">
<span class = "current"></span>
<span ></span>
<span ></span>
<span ></span>
<span ></span>
</div>
<a href="javascript:;" id="prev" class="arrow"><</a>
<a href="javascript:;" id="next" class="arrow">></a>
</div>
</body>
</html>css:
/* 父容器设置为相对定位，方便后面的小圆点和箭头布局， 子绝父相*/
#container{
position: relative;
}
#banner,
#banner li{
list-style:none;
margin: 0;
padding: 0;
}
#banner{
position: absolute;
}
#banner li{
float: left;
}
#banner li img{
display:block;
}
#dots{
position: absolute;
bottom: 20px;
z-index: 1;
left: 50%;
transform: translateX(-50%);
}
#dots span{
cursor: pointer;
float: left;
width: 10px;
height: 10px;
border-radius: 50%;
background: #333;
margin-right: 5px;
}
#dots .current{
background: orangered;
}
.arrow{
cursor: pointer;
display: none;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 36px;
font-weight: bold;
width: 40px;
position: absolute;
z-index: 2;
top: 50%;
transform:translateY(-50%);
background: rgba(0,0,0,.3);
color: #fff;
}
#prev{
left: 20px;
}
#next{
right: 20px;
}
#container:hover .arrow{
display: block;
}
js:
window.onload = function(){
var container = document.getElementById("container");
var banner = document.getElementById("banner");
var imgBoxs = document.querySelectorAll("#banner li");
var imgs = document.querySelectorAll("#banner img");
var img = imgs[0];
var imgW = img.offsetWidth;
var imgH = img.offsetHeight;
/* 设置最外层盒子的高宽 */
container.style.width = imgW + "px";
container.style.height = imgH + "px";
container.style.overflow = "hidden";
banner.style.height = imgH + "px";
banner.style.width = imgW * imgBoxs.length + "px";
banner.style.left = - imgW + "px";
var prev = document.getElementById("prev");
var next = document.getElementById("next");
var currentIndex = 1;// currentIndex : 1, 2 ... , imgBoxs.length - 2
prev.onclick = function(){
currentIndex --;
animate(banner, - currentIndex * imgW, imgW, imgBoxs.length);
if(currentIndex == 0){
currentIndex = imgBoxs.length - 2;
}
setCurrentButtonStyle(currentIndex - 1);
}
next.onclick = function(){
currentIndex ++;
animate(banner, - currentIndex * imgW, imgW, imgBoxs.length);
if(currentIndex == imgBoxs.length - 1){
currentIndex = 1;
}
setCurrentButtonStyle(currentIndex - 1);
}
function setCurrentButtonStyle(index){
var spans = document.querySelectorAll("#dots span");
for(var i = 0; i < spans.length; i++){
spans[i].className = "";
}
spans[index].className = "current";
}
var spans = document.querySelectorAll("#dots span");
for(var i = 0; i < spans.length; i++){
spans[i].index = i;//缓存i
spans[i].onclick = function(){
currentIndex = this.index + 1;
animate(banner, - currentIndex * imgW);
setCurrentButtonStyle(this.index);
}
}
/* 开启自动轮播 */
var autoTimer = setInterval(function(){
next.click();
}, 2000);
container.onmouseover = function(){
clearInterval(autoTimer);
autoTimer = null;
}
container.onmouseout = function(){
autoTimer = setInterval(function(){
next.click();
}, 2000);
}
// 图片顺序：5 1 2 3 4 5 1
// 假的第一张：left = - imgW * (len - 1)
// 假的最后一张： left = 0
// next: 开始过渡到假的第一张时，开启和过渡时长相等的定时器， 过渡完成立即设置left为真的第一张上
// prev: 开始过渡到假的最后一张时，开启和过渡时长相等的定时器， 过渡完成立即设置left为真的最后一张上
//tansition 有坑，只对首尾状态有效，不能再一个函数内先取消动画，再开启，所以借助定时器
function animate(element, leftTarget, imgW, len){
element.style.transition = "left 0.5s linear";
element.style.left = leftTarget + "px";
if(leftTarget == (- imgW * (len - 1))){//next
setTimeout(function(){
element.style.transition = "left 0s linear";
element.style.left = - imgW + "px";
}, 500);
}else if(leftTarget == 0){//prev
setTimeout(function(){
element.style.transition = "left 0s linear";
element.style.left = - imgW * (len - 2) + "px";
}, 500);
}
}
}
