JavaScript-轮播3

window.onload=function()
{
var wrap=document.getElementsByClassName('wrap')[0];
var span=document.getElementsByClassName('buttons')[0].getElementsByTagName('span');
var arrow_left=document.getElementsByClassName('arrow_left')[0];
var arrow_right=document.getElementsByClassName('arrow_right')[0];

var speed=-600;
var timer=null;
var i=0;
var index=0;

//左右切换按钮
function prev()
{
index++;
if(index>4){
index=0;
}

showCurrentDot();

if(wrap.offsetLeft<-2000)
{
wrap.style.left=0;
}
else
{
wrap.style.left=wrap.offsetLeft+speed+"px";
}
}
function next()
{
index--;
if(index<0){
index=4;
}

showCurrentDot();

if(wrap.offsetLeft==0)
{
wrap.style.left=-2400+"px"
}
else
{
wrap.style.left=wrap.offsetLeft-speed+"px";
}
}
arrow_left.onclick=function()
{
prev();
}
arrow_right.onclick=function()
{
next();
}


//自动播放

clearInterval(timer);

function autoPlay()
{
timer=setInterval(function(){
prev();
},1000);
}

autoPlay();


//鼠标进入轮播图的时候，定时器关闭
wrap.onmouseover=function()
{
clearInterval(timer);
}
wrap.onmouseout=function()
{
autoPlay();
}


//选择图片的小按钮
function showCurrentDot()
{
for(i=0;i<span.length;i++)
{
span[i].className='';
}
span[index].className="on";
}


//选择按钮。会跳转到图片的位置
for(i=0;i<span.length;i++)
{
(function(i){
span[i].onclick=function()
{
index=i;
wrap.style.left=-(index*600)+"px";
showCurrentDot();
}
})(i);
}
}

 

 

<div class="container">
<div class="wrap">
<img src="./img/timg10.jpg" alt="1">
<img src="./img/timg14.jpg" alt="2">
<img src="./img/timg15.jpg" alt="3">
<img src="./img/timg17.jpg" alt="4">
<img src="./img/timg19.jpg" alt="5">
</div>
<div class="buttons">
<span class="on">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="arrow arrow_left"><</a>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="arrow arrow_right">></a>
</div>

 

 

 

* {margin:0;padding:0;}
a{text-decoration: none;}
.container {position: relative;width: 600px;height: 400px;margin:100px auto 0 auto;box-shadow: 0 0 5px green;overflow: hidden;}
.container .wrap {position: absolute;width: 3000px;height: 400px;z-index: 1;}
.container .wrap img {float: left;width: 600px;height: 400px;}
.container .buttons {
position: absolute;
right: 5px;
bottom:40px;
width: 150px;
height: 10px;
z-index: 2;
}
.container .buttons span {margin-left: 5px;display: inline-block;width: 20px;height: 20px;
border-radius: 50%;
background-color: green;
text-align: center;
color:white;
cursor: pointer;
}
.container .buttons span.on{background-color: red;}
.container .arrow {position: absolute;top: 35%;color: green;padding:0px 14px;border-radius: 50%;font-size: 50px;z-index: 2;display: none;}
.container .arrow_left {left: 10px;}
.container .arrow_right {right: 10px;}
.container:hover .arrow {display: block;}
.container .arrow:hover {background-color: rgba(0,0,0,0.2);}