js实现轮播图原理及示例

来源：互联网发布：javascript value属性编辑：程序博客网时间：2024/05/17 23:46

网上有很多的例子介绍，在这里我所做的无缝滚动就是通过改变元素的left值让图片呈现左右滚动的效果。
我们首先看一下 div+css 的结构样式：
这里写图片描述
div+css代码

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style type="text/css">            *{                margin: 0;                padding: 0;            }            ul,ol{                list-style: none;            }            /*消除图片底部3像素距离*/            img{                vertical-align: top;            }            .scroll{                width: 500px;                height: 200px;                margin: 100px auto;                border: 1px solid #ccc;                padding: 7px;                overflow: hidden;                position: relative;            }            .box{                width: 500px;                height: 200px;                overflow: hidden;                position: relative;            }            .box ul{                width: 600%;                position: absolute;                left: 0;                top: 0;            }            .box ul li{                float: left;            }            .scroll ol{                position: absolute;                right: 10px;                bottom: 10px;            }            .scroll ol li{                float: left;                width: 20px;                height: 20px;                background: pink;                text-align: center;                line-height: 20px;                border-radius: 50%;                background-color: pink;                             margin-left:10px ;                cursor: pointer;            }            .scroll ol li.current{                background-color: purple;            }        </style>    </head>    <body>        <div id="scroll" class="scroll">            <div id="box" class="box">                <ul id="ul">                    <li><img src="images/1.jpg" width="500" height="200"></li>                    <li><img src="images/2.jpg" width="500" height="200"></li>                    <li><img src="images/3.jpg" width="500" height="200"></li>                    <li><img src="images/4.jpg" width="500" height="200"></li>                    <li><img src="images/5.jpg" width="500" height="200"></li>                </ul>                <ol id="ol">                    <li class="current">1</li>                    <li>2</li>                    <li>3</li>                    <li>4</li>                    <li>5</li>                </ol>            </div>        </div>    </body></html>

展示效果如图：
这里写图片描述
接下来我们要将js 代码，
再此之前我们要明白，小圆点 1 2 3 并不是写死的，它是根据ul li中的图片张数来决定的，所以我们要先把div中ol li中的代码去掉
要实现无缝滚动就需要多一张图片才行，即克隆第一张图片，放到最后面。此时css布局保留，div中只剩下：

<body>        <div id="scroll" class="scroll">            <div id="box" class="box">                <ul id="ul">                    <li><img src="images/1.jpg" width="500" height="200"></li>                    <li><img src="images/2.jpg" width="500" height="200"></li>                    <li><img src="images/3.jpg" width="500" height="200"></li>                    <li><img src="images/4.jpg" width="500" height="200"></li>                    <li><img src="images/5.jpg" width="500" height="200"></li>                </ul>                           </div>        </div>    </body>

此时我们用js代码生成小圆点

var scroll = document.getElementById("scroll"); // 获得大盒子        var ul = document.getElementById("ul"); // 获得ul        var ulLis = ul.children;// 获得ul的盒子 以此来生成ol中li的个数        var liWidth = ul.children[0].offsetWidth;// 获得每个li的宽度        // 操作元素        // 因为要做无缝滚动，所以要克隆第一张，放到最后一张后面        // 1. 克隆元素        ul.appendChild(ul.children[0].cloneNode(true));        // 2.创建ol 和li        vaar ol = document.createElement("ol");//创建ol元素        scroll.appendChild(ol);// 把ol放到scroll盒子里面去        for (var i=0;i<ulLis.length-1;i++) {            var li = document.createElement("li");// 创建li元素            li.innerHTML = i + 1;// 给li里面添加文字  1 2 3 4 5            ol.appendChild(li);// 将li元素添加到ol里面        }        ol.children[0].className = "current";// ol中的第一个li背景色为purple

此时ol li元素即小圆点创建完毕我们接着用js做动画
动画部分包括：
1.鼠标经过第几个小圆点，就要展示第几张图片，并且小圆点的颜色也发生变化
2.图片自动轮播，（这需要一个定时器）
3.鼠标经过图片，图片停止自动播放（这需要清除定时器）
4.鼠标离开图片，图片继续自动轮播（重新开始定时器）
这里我们封装了一个animate()动画函数

// 动画函数 第一个参数，代表谁动  第二个参数 动多少        // 让图片做匀速运动，匀速动画的原理是 当前的位置 + 速度  即 offsetLeft + speed        function animate(obj,target){            // 首先清除掉定时器            clearInterval(obj.timer);            // 用来判断 是+ 还是 -  即说明向左走还是向右走            var speed = obj.offsetLeft < target ? 15 : -15;            obj.timer = setInterval(function(){                var result = target - obj.offsetLeft;//它们的差值不会超过speed                obj.style.left = obj.offsetLeft + speed + "px";                // 有可能有小数的存在，所以在这里要做个判断                             if (Math.abs(result) <= Math.abs(speed)) {                    clearInterval(obj.timer);                    obj.style.left = target + "px";                }            },10);        }

定时器函数

var timer = null; // 轮播图的定时器        var key = 0;// 控制播放的张数        var circle = 0;// 控制小圆点        timer = setInterval(autoplay,1000);// 自动轮播        function autoplay(){            /*自动轮播时,要对播放的张数key进行一个判断,如果播放的张数超过ulLis.length-1,            就要重头开始播放.  因为我们克隆了第一张并将其放在最后面,所以我们要从第二张图片开始播放*/            key++; // 先++            if(key > ulLis.length-1){// 后判断                ul.style.left = 0; // 迅速调回                key = 1; // 因为第6张是第一张，所以播放的时候是从第2张开始播放            }            // 动画部分            animate(ul,-key*liWidth);            // 小圆点circle   当显示第几张图片是，对应的小圆点的颜色也发生变化             /*同理,对小圆点也要有一个判断*/            circle++;            if (circle > olLis.length-1) {                circle = 0;            }            // 小圆点颜色发生变化            for (var i = 0 ; i < olLis.length;i++) {                // 先清除掉所用的小圆点类名                olLis[i].className = "";             }            // 给当前的小圆点 添加一个类名            olLis[circle].className = "current";        }

好啦，这里我们展示了主要代码，具体代码，查看这里下载js实现轮播效果

0 0