想锻炼一下自己的原生js能力可以从写一个轮播图开始，轮播图的运用想必大家都知道吧，好了废话不多说，开始记笔记了，一些需要注意的点，我都在代码中标注了
首先是构造html：
<div id="container"> <div id="list" style="left:-600px"> <img src="img/4.jpg" alt="4"> <img src="img/1.jpg" alt="1"> <img src="img/2.jpg" alt="2"> <img src="img/3.jpg" alt="3"> <img src="img/4.jpg" alt="4"> <img src="img/1.jpg" alt="1"> </div> <div id="buttons"> <span index=1 class="on"></span> <span index=2></span> <span index=3></span> <span index=4></span> </div> <a id="prev" class="arrow"></a> <a id="next" class="arrow"></a> </div>
这里需要讲一下的是图片本来是4个，但是需要把第4个和第一个分别多加入到第一个位置和最后一个位置，（为何要这一步？是为了实现无缝播放，由于移动时，为了让用户感觉到第4个图片播放完之后，是第一个图片，必须将第4个图片放到第一个图片的前面）并且设置list的偏移量为-600px（-600px是由于设置时将图片4放置在list的第一个位置，而要显示的是图片1，此时图片1的位置是-600px）
然后设置css参数
*
{
margin: 0;
padding: 0;
text-decoration: none;
}
body
{
padding: 20px;
}
#container
{ position: relative;
overflow: hidden;
500px; height: 500px; border: 3px solid rgb(247, 250, 203);
}/*容器宽高为图片的宽度和高度*/
#list
{ position: absolute;
z-index: 1;
3000px; /*list的所有图片数和图片的乘积*/
height: 500px;
}
#list img
{
float: left;
500px;/*规定的图片的宽度*/
}
#buttons
{
position: absolute;
z-index: 2;
bottom: 20px;
left: 250px;
100px;
height: 10px;
}
#buttons span
{float: left;
10px;
height: 10px;
margin-right: 5px;
cursor: pointer;
border: 1px solid #fff;
border-radius: 50%;
background: rgb(141, 139, 139);
}
#buttons .on
{
background:pink;
}
.arrow
{font-size: 36px;
font-weight: bold;
line-height: 39px;
position: absolute;
z-index: 2;
top: 180px;
display: none;
40px;
height: 40px;
cursor: pointer;
text-align: center;
color:pink;
background-color: rgb(229, 247, 194);
}
.arrow:hover
{
background-color:rgb(194, 212, 156) ;
}
#container:hover .arrow
{
display: block;
}
#prev
{
left: 20px;
}
#next
{
right: 20px;
}
最后是js逻辑：
var prev=document.getElementById("prev"); var next=document.getElementById("next"); var list=document.getElementById("list"); var buttons=document.getElementById("buttons").getElementsByTagName("span"); var index=1; var timer; var animated=false; var container=document.getElementById("container"); function shownButton(){ for(var i=0;i<buttons.length;i++){ if(buttons[i].className=="on"){ buttons[i].className=""; break; } } buttons[index-1].className="on"; } function animate(offset){ var time=100;//根据图片宽度来，最好和inteval相除为整数，不然后面移动会出问题， var inteval=10; var speed=offset/(time/inteval); animated=true; var newLeft=parseInt(list.style.left)+offset; function go(){ if((speed>0&&parseInt(list.style.left)<newLeft)||(speed<0&&parseInt(list.style.left)>newLeft)){ list.style.left=parseInt(list.style.left)+speed+"px"; setTimeout(go,inteval);//递归函数 } else{ animated=false; if(newLeft>-500){//当大于第一个图的位移量切换到第4张图 list.style.left=-2000+"px"; }; if(newLeft<-2000){//当小于最后一个图的位移量切换到第一张图 list.style.left=-500+"px"; } } } go(); } prev.onclick=function(){ if(!animated){ if(index==1){ index=4;//根据自己代码的index值进行修改 } else{ index-=1; } shownButton(); animate(500);//传入图片宽度 } } next.onclick=function(){ if(!animated){ if(index==4){//根据自己代码的index值进行修改 index=1; } else{ index+=1; } shownButton(); animate(-500);//第一章图片宽度 } } for(var i=0;i<buttons.length;i++){ buttons[i].onclick=function(){ if(this.className=="on"){ return; } var myIndex=parseInt(this.getAttribute(index)); var offset=-500*(myIndex-index);//偏移量根据实际情况修改 if(!animated){ animate(offset); } index=myIndex; shownButton(); } } function play(){ timer=setInterval(function(){ next.onclick(); },2000); } function stop(){ clearInterval(timer); } play(); container.onmouseover=stop; container.onmouseout=play;
完整的代码可以去我的github下载，欢迎各位点星星和fork
https://github.com/narrow-gate/lunbo