浅谈js写轮播图的思路与心得

轮播图思路：

1 、 首先我们需要在开始时将我们锁需要的封装函数链接进来。
列如
而且我们必须得得到所有需要用到的对象用 getElementById 、getElementsByTagName，然后把需要一个规范的命名。

var oDiv = document.getElementById("carousel")
var lBtn = document.getElementById("leftBtn")
var rBtn = document.getElementById("rightBtn")
var picDiv = document.getElementById("m_unit")
var picUl = picDiv.getElementsByTagName("ul")[0]
var picLi = picUl.getElementsByTagName("li")
var ydDiv = document.getElementById("circles")
var ydLi = ydDiv.getElementsByTagName("li")

2 、第二部我们创建一个定时器先让轮播图中所有图片的 li 动起来
右边点击函数跟定时器所运动的函数一个样，所以我们可以封装一个函数abc（）；他们是共用的；

var timer = setInterval(abc,options.interval)
        rBtn.onclick = abc;
        oDiv.onmouseover = function(){
            clearInterval(timer);
        }
        oDiv.onmouseout = function(){
            timer = setInterval(abc,options.interval);
        }

        function abc(){
            if(picDiv.isanimated) {
                return;
            }
            index++;
            change();
            animate(picDiv,{"left" : -options.width * index},options.animatetime,options.tween,function(){
                if(index > picLi.length - 1){
                    index = 0;
                    picDiv.style.left = "0px";
                }
            });
        }

3 、 写出左边点击按钮事件的函数，这样就如上abc（）；差不多只是修改一些东西就行了；

lBtn.onclick = function(){
          if(picDiv.isanimated) {
              return;
          }
          index--;
          if(index < 0){
              index = picLi.length - 1;
              picDiv.style.left = -options.width * picLi.length + "px";
          }
          change();
          animate(picDiv,{"left" : -options.width * index},options.animatetime,options.tween);
      }

4 、讲小圆点的样式改变封装成一个函数就是下面的chnage（）；
然后还得监听点击每个小圆点的事件，所以可以用for + onclick 讲每个小圆点点击事件给写出来。

for (var i = 0; i < ydLi.length; i++) {
            ydLi[i].xxx = i;
            ydLi[i].onclick = function(){
                index = this.xxx;
                animate(picDiv,{"left" : -options.width * index},options.animatetime,options.tween);
                change();
            }
        }

        function change(){
            var n = index > length - 1 ? 0 : index;
            for (var i = 0; i < ydLi.length; i++) {
                picLi[i].className = "";
            }
            picLi[n].className = "cur";
        }

难点：
1 、函数截留，当我们点击函数正在执行时，如果多次点击就会出现图片运动混乱的现象，这是我们需要用if(picDiv.isanimated) {return;}，
2 、cloneNode（）函数picUl.appendChild(picLi[0].cloneNode(true))