js如何实现轮播效果

本篇文章给大家分享的内容是js如何实现轮播效果，有着一定的参考价值，有需要的朋友可以参考一下

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

    
        
        
        
    
    
        

            

                

                    
@@##@@
                    
@@##@@
                    
@@##@@
                    
@@##@@
                    
@@##@@
                
                

                    
1
                    
2
                    
3
                    
4
                    
5
                
            

        

    

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

        

            

                

                    
@@##@@
                    
@@##@@
                    
@@##@@
                    
@@##@@
                    
@@##@@
                
               
            

        

    

此时我们用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
此时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实现轮播效果