js实现轮播图原理及示例（转）

浅浅的花香味﹌ 2022-05-18 01:38 130阅读 0赞

网上有很多的例子介绍，在这里我所做的\*\*无缝滚动\*\*就是 通过改变元素的left值让图片呈现左右滚动的效果。  
我们首先看一下 div+css 的结构样式：  
![这里写图片描述][SouthEast]  
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>
    
       
        
         1
         2
         3
         4
         5
         6
         7
         8
         9
         10
         11
         12
         13
         14
         15
         16
         17
         18
         19
         20
         21
         22
         23
         24
         25
         26
         27
         28
         29
         30
         31
         32
         33
         34
         35
         36
         37
         38
         39
         40
         41
         42
         43
         44
         45
         46
         47
         48
         49
         50
         51
         52
         53
         54
         55
         56
         57
         58
         59
         60
         61
         62
         63
         64
         65
         66
         67
         68
         69
         70
         71
         72
         73
         74
         75
         76
         77
         78
         79
         80
         81
         82
         83
         84
         85
         86

展示效果如图：  
![这里写图片描述][SouthEast 1]  
接下来我们要将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>
       
        
         1
         2
         3
         4
         5
         6
         7
         8
         9
         10
         11
         12
         13

此时我们用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
            var 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
       
        
         1
         2
         3
         4
         5
         6
         7
         8
         9
         10
         11
         12
         13
         14
         15
         16
         17
         18

此时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);
            }
       
        
         1
         2
         3
         4
         5
         6
         7
         8
         9
         10
         11
         12
         13
         14
         15
         16
         17
         18

定时器 函数

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

[SouthEast]: /images/20220518/72aad1300a6c41ba81e232ee8f0c55ec.png
[SouthEast 1]: /images/20220518/ca650e9367394ca7a96d90e092fc34eb.png
[js]: http://download.csdn.net/detail/diligentkong/9755094