<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播</title>
<style>
.container{width: 600px;position: absolute;height: 400px;margin: auto;top:0;left: 0;bottom: 0;right: 0;overflow: hidden}
.list{width: 4200px;height: 400px;position: absolute;}
.list img { float: left;}
#buttons { position: absolute; height: 12px; width: 80px; z-index: 2; bottom: 20px; left: 262px;}
#buttons span { cursor: pointer; float: left; border: 1px solid #fff; width: 10px; height: 10px; border-radius: 50%; background: #333; margin-right: 4px;}
#buttons .on { background: orangered;}
.arrow{cursor:pointer;width: 40px;height: 40px;display:none;background-color: rgba(255,2255,255,0.1);z-index: 2;line-height: 35px;top:180px;text-align: center;position: absolute;color: #eee;font-weight: bold;font-size: 36px}
.arrow:hover{background-color: rgba(255,2255,255,0.3)}
.container:hover .arrow{display: block}
#pre{left: 20px}
#next{right: 20px}
</style>
</head>
<body>
<div class="container">
<div class="list" style="left: -600px">
<img src="https://sxzimgs.oss-cn-shanghai.aliyuncs.com/yingxiao/page/8124d690-8fb0-11e8-920d-44032ca554a5.jpeg" alt="">
<img src="https://sxzimgs.oss-cn-shanghai.aliyuncs.com/yingxiao/page/4de3a402-8fb0-11e8-ae84-44032ca554a5.jpeg" alt="">
<img src="https://sxzimgs.oss-cn-shanghai.aliyuncs.com/yingxiao/page/5d17e394-8fb0-11e8-8d7e-44032ca554a5.jpeg" alt="">
<img src="https://sxzimgs.oss-cn-shanghai.aliyuncs.com/yingxiao/page/69c9519a-8fb0-11e8-9fb0-44032ca554a5.jpeg" alt="">
<img src="https://sxzimgs.oss-cn-shanghai.aliyuncs.com/yingxiao/page/779910c0-8fb0-11e8-a3f4-44032ca554a5.jpeg" alt="">
<img src="https://sxzimgs.oss-cn-shanghai.aliyuncs.com/yingxiao/page/8124d690-8fb0-11e8-920d-44032ca554a5.jpeg" alt="">
<img src="https://sxzimgs.oss-cn-shanghai.aliyuncs.com/yingxiao/page/4de3a402-8fb0-11e8-ae84-44032ca554a5.jpeg" alt="">
</div>
<div id="buttons">
<span class="on"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div href="javascript:;" id="pre" class="arrow"><</div>
<div href="javascript:;" id="next" class="arrow">></div>
</div>
<script>
window.onload=function () {
var container=document.getElementsByClassName("container")[0];
var pre=document.getElementById("pre");
var next=document.getElementById("next");
var list=document.getElementsByClassName("list")[0];
var buttons=document.getElementById("buttons").getElementsByTagName("span")
var index=1;
var animated=false;
var timer;
function autoPlay() { //自动轮播
timer=setInterval(function () {
next.onclick();
},3000)
}
autoPlay()
function stop() { //结束自动轮播
clearInterval(timer)
}
container.onmouseover=function () {
stop();
}
function showButton() { //改变小圆点颜色
for(var i=0;i<buttons.length;i++) {
buttons[i].className = ""
}
buttons[index-1].className='on'
}
function animate(offset) { //图片跳转动作
var newLeft=parseInt(list.style.left) + offset
var time=300
var interval=10
var speed=offset/(time/interval)
function go() {
if((speed<0 && parseInt(list.style.left)>newLeft)||(speed>0 && parseInt(list.style.left)<newLeft)){
animated=true
list.style.left=parseInt(list.style.left)+speed+'px'
setTimeout(go,interval)
}else{
animated=false
list.style.left=newLeft + 'px'
if(newLeft > -600){
list.style.left=-3000 + 'px'
}
if(newLeft < -3000){
list.style.left=-600 + 'px'
}
}
}
go();
}
pre.onclick=function () { //左箭头点击
if(!animated){
animate(600);
}
if(index==1){
index=5
}else{
index-=1
}
showButton()
}
next.onclick=function () { //右箭头点击
if(!animated){
animate(-600);
}
if(index==5){
index=1
}else{
index+=1;
}
showButton()
}
for (var i=0;i<buttons.length;i++){ //小圆点点击
buttons[i].index=i
buttons[i].onclick=function () {
if(this.className=='on'){
return
}
var distance=(this.index+1-index)*(-600)
if(!animated){
animate(distance);
}
index=this.index+1
showButton()
}
}
}
</script>
</body>
</html>