浅谈轮播图（原生JavaScript实现）

现在各种轮播图插件，玲琅满目，用起来也非常方便，通常只需要选择元素然后传入参数就可以了。但是，和授人以鱼不如授人以渔一样的道理，不管怎样最基本的轮播图原理还是应当掌握的。这样不仅有利于我们自己写出来满足自己要求的轮播图，同时也对我们更好的使用其他插件有帮助。当然，最重要的是扎实我们的JavaScript基本功！

切入正题。

轮播，顾名思义，就是图片的循环“播放”。播放可以自动（定时器）也可以手动（按钮）。轮播的精要其实是切换，切换可以是上下左右不同方向的移动来实现切换，移动可以匀速小步调播放的帧动画可以是一步一幅的“僵尸跳”，也可以是透明度渐变。

一，最基本的图片轮播。

最基本的图片轮播有两种基本形式：

　　第一种是要轮播的图片排列在一张画布上，画布之上有一个“窗口”，窗口固定，图片的轮播通过移动窗口之下的画布来实现（一般通过操纵它的margin-top或者left来实现）简称为‘视窗画布型’；

　　第二种，不需要画布层，窗口的宽高严格等于元素的宽高，通过精准的控制每一个元素的展示层级来实现轮播（一般使用绝对定位来实现）‘绝对定位型’。下面来逐一进行分析。

（1）视窗画布型：

这种类型有一个固定的模式，要点如下：

html和css：

第一，需要有固定大小并有超出隐藏属性的div，作为窗口即视窗。

第二，窗口元素内，需要有固定宽度或者高度（取决于你的轮播是左右还是上下切换）的画布元素，它用来容纳你的所有轮播内容，宽度或者高度通常大于窗口元素。

第三，需要展示的内容，固定排列在画布元素上，即第二所述元素；

JavaScript：

第一，动画效果的实现是通过JavaScript操纵画布元素的margin-top，或者margin-left来实现的。

第二，为了实现连续的变换，通常需要画布元素内，对原始内容重复添加；

示例1：等间隔切换的图片。每隔一定时间段，会切换一张图片，切换是瞬时的，和一个常见的轮播图相比缺少切换时的动画效果，先理解一个一个的组件。主要思路是：通过定时器控制，每隔一定时间间隔操作一次元素属性，使之改变，从而实现等间隔切换。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>简单轮播图</title>
    </head>
    <style>
        ul,li{list-style: none;padding: 0;margin: 0;}
        ul{font-size: 0px;}
        .window{width: 300px;height: 200px;overflow: hidden;margin: 60px auto;}
        .canvas{width: 6666px;height: 200px;}
        .canvas img{height: 200px;width:300px;}
        ul li{display: inline-block;width: 300px;text-align: center;}
    </style>
    <body>
        <div class="window">
            <div class="canvas">
                <ul>
                    <li><img src="images/muwu.jpg"></li>
                    <li><img src="images/shuijiao.jpg"></li>
                    <li><img src="images/yuantiao.jpg"</li>
                </ul>
            </div>
        </div>
    </body>
    <script>
//        通过操作画布元素的左外边距实现左右轮播
        //取得视窗和画布元素，定义静态变量
        var window1=document.getElementsByClassName('window')[0],
            canvas=document.getElementsByClassName('canvas')[0],
            stepDistance=300,//每次移动的小距离,也就是没帧位移，单位为像素
            i=0,
            sum=document.getElementsByTagName('li').length;//轮播子项目总数
        //操纵外边距
        sliderMove();
        function sliderMove(){
            //每隔两秒钟切换一次轮播图，到达末尾时从第一张开始。
            setInterval(function(){
                if (i<sum) {
//                    当子项没有完全展示完时,不断移动
                    canvas.style.marginLeft=(-stepDistance*i)+'px';
                    i++;
                } else{
//                    当子项展示完时,从头开始循环
                    i=0;
                    canvas.style.marginLeft=(-stepDistance*i)+'px';
                    i++;
                }
            },2000);
        }
    </script>
</html>

这种简单的轮播图，我觉得给它起名为“僵尸跳”，很合适。是在轮播，不过，不和谐，一次一跳很突兀。

示例2：一直移动的效果，其实也就是第一种实例的细化，帧间隔变大，帧位移变小。图片之间一直在匀速移动，和一个常见的轮播图相比缺少切换时的停顿，即第一个示例的效果，先理解一个一个的组件。主要思路是：通过定时器，在很短的时间内连续移动元素，从而产生类似动画的效果。下面贴上代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>简单轮播图</title>
    </head>
    <style>
        ul,li{list-style: none;padding: 0;margin: 0;}
        ul{font-size: 0px;}
        .window{width: 300px;height: 200px;overflow: hidden;margin: 60px auto;}
        .canvas{width: 6666px;height: 200px;}
        .canvas img{height: 200px;width:300px;}
        ul li{display: inline-block;width: 300px;text-align: center;}
    </style>
    <body>
        <div class="window">
            <div class="canvas">
                <ul>
                    <li><img src="images/muwu.jpg"></li>
                    <li><img src="images/shuijiao.jpg"></li>
                    <li><img src="images/yuantiao.jpg"</li>
                    <li><img src="images/muwu.jpg"></li>
                </ul>
            </div>
        </div>
    </body>
    <script>
        var window1=document.getElementsByClassName('window')[0],
            canvas=document.getElementsByClassName('canvas')[0],
            stepDistance=300/(3000/13),
            sumDistance=0,
            sum=(document.getElementsByTagName('li').length-1)*300;
        sliderMove();
        function sliderMove(){
            setInterval(function(){
                if (sumDistance<sum) {
                    canvas.style.marginLeft=(-sumDistance)+'px';
                    sumDistance+=stepDistance;
                } else{
                    sumDistance=0;
                    canvas.style.marginLeft=(-sumDistance)+'px';
                    sumDistance+=stepDistance;
                }
            },13);
        }
    </script>
</html>

这个其实是我们后面要说的轮播的同时移动的移动部分的简单原理。其实，无论移动还是停顿都是通过定时器来实现的。

（2）绝对定位型：

这是通过操纵元素的z-index来实现切换的动画类型。

二，轮播的同时移动。

三，带按钮的轮播图。

四，有其他特效的轮播图。

五，一些我用过的轮播图插件简介。

未完待续。。。

posted @ 2018-04-16 14:59 喜欢的事用心去做阅读(462) 评论(0) 编辑收藏举报

刷新页面返回顶部