在该笔记中将学到列表展示中焦点图轮播特效的方法与展示效果
本系列的是参考慕课网 阿安老师的视频，仅供个人查阅使用，具体讲解推荐参考视频。
实现的效果有：
- 当鼠标放在图片上的时候，会显示左边和右边的箭头，在图片的下部会显示五个小圆点，以供点击切换图片
- 点击左右箭头或者小圆点都可以切换图片，如果鼠标从图片上移开以后，每隔一段时间都可以自动切换到下一张图片上
实现的注意点：所有的图片都是在一个 Div 中并列排布，但是只中间一张图片的区域允许显示，将图片并列排布的原因是为了在图片切换的时候达到滚动的效果。如果有 5 张图片，则这个 div 中需要有 7 个图，这样才能达到图片切换的时候实现无缝滚动的效果。
显示效果如下：
代码如下：
<html>
<head>
<title>焦点图轮播特效</title>
<meta charset="utf-8">
<style>
*{margin: 0; padding: 0;}
#container{width: 600px;height: 400px;border: 2px solid #333;position: relative;overflow: hidden;margin: 100px auto;}
#list{height: 400px;width: 4200px;position: absolute;left: -600px;transition:all 0.5s;}
#list img{width: 600px;height: 400px;float: left;}
#buttons{position: absolute;height: 10px;width: 110px;bottom: 20px;left: 250px;z-index: 2;}
#buttons span{width: 10px;height: 10px;border-radius:50%;margin-right: 10px;background-color:#333;display: none;float: left;border: 1px solid #fff;cursor: pointer;}
#buttons .on{background-color: orange;}
.arrow{position: absolute;width: 40px;height: 40px;z-index: 2;display: none;background-color: rgba(0, 0, 0, 0.3);font-size: 36px;text-align: center;text-decoration: none;font-weight: bold;color: #FFF;top: 50%;}
#prev{left: 20px;}
#next{right: 20px;}
#container:hover .arrow{display:block;}
.arrow:hover{background-color:rgba(0, 0, 0, 0.7);}
#container:hover #buttons span{display:inline-block;}
</style>
<script>
window.onload = function(){
let list = document.getElementById("list");
let prev = document.getElementById("prev");
let next = document.getElementById("next");
let buttons = document.getElementById("buttons").getElementsByTagName("span");
let container = document.getElementById("container");
let index = 1,i,animated = false,timer;
function arrowAnimate(offset) {
animated = true;
let setOffset = parseInt(document.defaultView.getComputedStyle(list)["left"]) + offset,i, len;
list.style.transitionProperty = "all";
list.style.left = setOffset + "px";
if(setOffset > -600) {
setTimeout(function(){
list.style.transitionProperty = "none";
list.style.left = "-3000px";
}, 500);
} else if(setOffset < -3000) {
setTimeout(function() {
list.style.transitionProperty = "none";
list.style.left = "-600px";
}, 500);
}
if(offset < 0) {
index++;
if(index > 5){
index = 1;
}
} else {
index--;
if(index < 1) {
index = 5;
}
}
for(i=0, len = buttons.length; i<len;i++) {
if(i === (index-1)) {
buttons[i].className = "on"
}else{
buttons[i].className = null;
}
}
setTimeout(function(){
animated = false;
}, 500);
}
function buttonOffset(offset){
animated = true;
list.style.transitionProperty = "all";
let setOffset = 0-parseInt(offset)*600;
list.style.left = setOffset + "px";
if(setOffset > -600) {
setTimeout(function() {
list.style.transitionProperty = "none";
list.style.left = "-3000px";
}, 500);
} else if(setOffset < -3000) {
setTimeout(function() {
list.style.transitionProperty = "none";
list.style.left = "-600px";
}, 500);
}
index = offset;
for(i=0, len = buttons.length; i<len;i++) {
if(i === (index-1)) {
buttons[i].className = "on"
}else{
buttons[i].className = null;
}
}
setTimeout(function(){
animated = false;
}, 500);
}
for(i=0; i<buttons.length;i++) {
if(!animated){
buttons[i].onclick = function(){
let This = this;
buttonOffset(This.getAttribute("index"));
}
}
}
prev.onclick = function(){
if(!animated){
let offset = arrowAnimate(600);
}
}
next.onclick = function(){
if(!animated) {
let offset =arrowAnimate(-600);
}
}
function play(){
timer = setInterval(next.onclick, 3000);
}
function stop(){
clearInterval(timer);
}
container.onmouseover = stop;
container.onmouseout = play;
play();
}
</script>
</head>
<body>
<div id="container">
<div id="list">
<img src="http://ofjjubwp5.bkt.clouddn.com/image/jpg/img54.jpg" alt="">
<img src="http://ofjjubwp5.bkt.clouddn.com/image/jpg/img54.jpg" alt="">
<img src="http://ofjjubwp5.bkt.clouddn.com/image/jpg/img54.jpg" alt="">
<img src="http://ofjjubwp5.bkt.clouddn.com/image/jpg/img54.jpg" alt="">
<img src="http://ofjjubwp5.bkt.clouddn.com/image/jpg/img54.jpg" alt="">
<img src="http://ofjjubwp5.bkt.clouddn.com/image/jpg/img54.jpg" alt="">
<img src="http://ofjjubwp5.bkt.clouddn.com/image/jpg/img54.jpg" alt="">
</div>
<div id="buttons">
<span index="1" class="on"></span>
<span index="2"></span>
<span index="3"></span>
<span index="4"></span>
<span index="5"></span>
</div>
<a href="javascript:;" id="prev" class="arrow"><</a>
<a href="javascript:;" id="next" class="arrow">></a>
</div>
</body>
</html>