想锻炼一下自己的原生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;
width: 500px; height: 500px; border: 3px solid rgb(247, 250, 203);
}/*容器宽高为图片的宽度和高度*/
#list
{ position: absolute;
z-index: 1;
width: 3000px; /*list的所有图片数和图片的乘积*/
height: 500px;
}
#list img
{
float: left;
width: 500px;/*规定的图片的宽度*/
}
#buttons
{
position: absolute;
z-index: 2;
bottom: 20px;
left: 250px;
width: 100px;
height: 10px;
}
#buttons span
{float: left;
width: 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;
width: 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