轮播图的原理

轮播图分为两种：滑动型的和消失型的。

滑动型就是图片按照一个方向滑动切换，到达最后一张图片根据需要继续按照那个方向滑动或者回滑到第一张图。

这个原理就是：

想象一下小时候玩的抽板，就是在一个面积为a的空心纸板后面放一张面积为n*a的长纸板，n为图片个数。我们看到的轮播图就是空心纸板上露出来的部分。

然后我们通过左右拉纸板达成动态效果。

实现注意：

这个代码使用纯的js写的话，需要用到两次计时器，还有清除计时器，定时器，代码原理是：

计时器启动——》图片开始滑动——》滑动结束，定时器启动，清除计时器，使得图片固定——》时间差不多了（例如2秒后），继续启动计时器，滑动下一张图。

类似的代码如下：

<div id="aa">0</div>
        <script>
            var aa=document.getElementById("aa");
            var i=0;
            var j=0;
            start()
            function start(){
                setInterval(move,4000)
            }
            function move(){
                
                var timmer=setInterval(function(){
                    i++;
                    j=j+1;
                    aa.innerHTML=j;
                    if(i>40){
                        i=0;
                        clearInterval(timmer)
                    }
                },50)
            }
        </script>

将div中的数值作为纸板的移动值即可。

html部分代码：

<div class="最外层容器">

　　<div class="空心纸板，需要position属性和overflow:hidden属性保证隐藏其他图片">

　　　　<div class="长纸板，必须规定长度，否则上面的图片碰到浏览器的边缘会跳到下一行">

　　　　　　<img><img><img class="float:left">

　　　　</div>

　　</div>

</div>

第二种消失型的就相对简单的多：

将第一张图片的透明度随着时间渐渐降低，达到零的时候切换下一张图即可，同时还原透明度。