菜鸟笔记——简单的轮播(js部分)

在本人看来轮播的重点是如何使用计时器，目前我接触的轮播大致上分两种，一种有过渡的轮播和另一种没过渡的轮播，一种是将多张图片放入同一个标签下将其视做一张大的图片，或者干脆是一张大的图片，另一种是将通过改变属性display来实现轮播但是我不会。

我们来说第一种，这一种是将几张图片放入一个标签，大概就是这样的
它通过移动一定量的像素来实现轮播，
这个轮播分为两个部分，第一将计算要移动的距离。

var tranfor=false;//是否在运动
var index=1;//记录当前图片的位置
var timer=null;//计时器
window.onload=function(){ 
function animate(offset){//offset 移动的距离
         tranfor=true;
         var list=document.getElementById("list");
         var newleft=0;
         var time=30;//300ms 总的运行时间
         var interval=10;//间隔时间 总的运行次数=time/interval
         var speed=offset/(time/interval);//每次运动的距离
         newleft=parseInt(list.style.left)+offset;//parseInt()将字符串 转换为一个数字类型
         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,interval);//
                 }else{
                            list.style.left=newleft+"px";
                            if(newleft>-670){
                                            list.style.left=-670*5+"px";
                                   }
                                   if(newleft<-670*5){
                                   list.style.left=-670+"px";
                                   }
                                   tranfor=false;
                          }
         }
         go();
}

图片向左移动 传递过来的值是负数 speed<0，list.style.left的值逐渐减小，所以只要是list.style.left大于newleft的值，那么就应该要调用go方法

speed>0&&parseInt(list.style.left)<newleft，图片向右移动
传递过来的值是整数 speed>0 ，list.style.left的值逐渐增大，所以只要是list.style.left小于newleft的值 那么就应该要调用go方法

然后通过getElementById()方法通过元素ID找到该元素，写一个点击事件每一次点击移动一定量的像素，再利用setInterval方法来循环这个点击事件，以下是代码：

var prev=document.getElementById("prev");//

var next=document.getElementById("next");

var bottons=document.getElementById("bottons").getElementsByTagName("span");

var container=document. getElementById("container");
 prev.onclick=function(){
         if(index===1){
                index=5;
         }else{
                     index--;
          }
              if(tranfor===true){
              return;
              }
              animate(670);
       };
       next.onclick=function(){
              if(tranfor===true){
                return;
              }
              if(index===5){
                     index=1;
              }else{
                     index++;
              }
              animate(-670);
       };
       for(var i=0;i<bottons.length;i++){
              bottons[i].onclick=function(){
                     if(tranfor===true){
                        return;
                     }
                     var myindex=this.getAttribute("index");//获取属性值
                     var offset=-670*(myindex-index);
                     animate(offset);
                     index=myindex;
              };
       }
       function play(){
              timer=setInterval(function(){
                     next.onclick();
              },200);
       }
       function stopPlay(){
              clearInterval(timer);
       }
       play ();
       container.onmousemove=stopPlay;
       container.onmouseout=play;
};