浅谈轮播图(原生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来实现切换的动画类型。

二,轮播的同时移动。

三,带按钮的轮播图。

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

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

未完待续。。。

猜你喜欢

转载自www.cnblogs.com/benxiaohai-microcosm/p/6147176.html

相关文章