JavaScript各类轮播图（二）

第二种

原理：把所有图片放在一侧，如：全部放在右侧，缓动到盒子中，在从盒子中缓动到左侧，在把左侧的图片放回右侧
//body部分

//具体细节请参照第一种，链接在文章尾部    <div class="box">        <div class="slider-content">            <div><img src="images/1.jpg" alt="" /></div>            <div><img src="images/2.jpg" alt="" /></div>            <div><img src="images/3.jpg" alt="" /></div>            <div><img src="images/4.jpg" alt="" /></div>            <div><img src="images/5.jpg" alt="" /></div>        </div>        <div class="slider-control">            <!-- <span class="slider-control-bar current"></span>            <span class="slider-control-bar "></span>            <span class="slider-control-bar "></span>            <span class="slider-control-bar "></span>            <span class="slider-control-bar "></span> -->        </div>        <span id="pre"></span>        <span id="next"></span>    </div>

//CSS样式

        *{            margin: 0;            padding: 0;        }        .box{            width: 800px;            height: 450px;            position: relative;            margin: 50px auto;            overflow: hidden;        }        .box .slider-content{            width: 800px;            height: 400px;        }        .box .slider-content div{    //让图片全部脱标，便于处理            position: absolute;            top: 0;            left: 0;        }        .box .slider-content img{            width: 800px;            height: 400px;        }        .box .slider-control{       //下标样式            width: 800px;            height: 50px;            /*background-color: pink;*/            text-align: center;        }           .box .slider-control .slider-control-bar{      //此处的序列加背景图片            display: inline-block;            width: 32px;            height: 5px;            background: url(images/icon.png) no-repeat -32px -850px;            /*background-size: 64px 5px;*/            cursor: pointer;            margin: 15px 20px 0 15px;        }        .box .slider-control .slider-control-bar:hover{            background: url(images/icon.png) no-repeat -32px -830px;        }        .box .slider-control .slider-control-bar.current{            background: url(images/icon.png) no-repeat 0px -830px;        }        #pre,#next{            width: 20px;            height: 35px;            position: absolute;            top: 40%;            /*left: 0;*/            background-color: red;            cursor: pointer;        }        #pre{          //左右切换加背景图片和背景颜色，注意写法。            left: 5px;            padding: 5px;            background: rgba(0,0,0,0.6) url(images/icon.png) no-repeat 5px 5px;        }        #next{            right: 5px;            padding: 5px;            background: rgba(0,0,0,0.6) url(images/icon.png) no-repeat -5px -40px;        }

重点：JS部分

window.onload = function(){    var box = document.getElementsByClassName('box')[0];    var content = document.getElementsByClassName('slider-content')[0];    var imgArr = content.getElementsByTagName('div');    var control = box.getElementsByClassName('slider-control')[0];    var listArr = control.getElementsByTagName('span');    var pre = document.getElementById('pre');    var next = document.getElementById('next');    var imgWidth = imgArr[0].offsetWidth;    for(var i = 0; i < imgArr.length; i++){    //在控制栏中创建序列        var bar = document.createElement('span');        if(i == 0){       //创建的第一序列给添加背景颜色            bar.className = 'slider-control-bar current';        }else{            bar.className = 'slider-control-bar';        }                       control.appendChild(bar);        bar.index = i;        bar.onclick = function(){         //序列的点击事件            if(currentIndex > this.index){         //如果当前的索引比点击的序列大时，把点击的序列对应的图片放在盒子左侧，当前的图片右移，然后点击序列对应的图片右移 left:0                imgArr[this.index].style.left = -imgWidth + 'px';                animate(imgArr[currentIndex],{left:imgWidth});            }else if(currentIndex < this.index){          //如果点击的序列比当前图片的索引大时，点击序列对应的图片放在右边，当前图片左移，点击序列的图片左移                imgArr[this.index].style.left = imgWidth + 'px';                animate(imgArr[currentIndex],{left:-imgWidth});             }            currentIndex = this.index;        //移动时要更改整体的索引值            animate(imgArr[this.index],{left:0});            for(var i = 0; i < imgArr.length; i++){       //用排他思想，为点击的序列添加背景（即切换背景图片，即增加类名）                listArr[i].className = "slider-control-bar";            }            this.className = "slider-control-bar current";        }    }            //设置最初样式，所有图片放在盒子右边，然后第一张图片放在盒子中                    for(var i = 0; i < imgArr.length; i++){                imgArr[i].style.left = imgWidth + 'px';            }            imgArr[0].style.left = 0 + 'px';            var currentIndex = 0;      //定义索引值，初始为0            function nextImg(){         //下一张图片                 animate(imgArr[currentIndex],{left:-imgWidth});   //当前索引的图片向左移                currentIndex++;         //索引加1                if(currentIndex >= imgArr.length){      //如果索引等于图片的数量，索引归0                    currentIndex = 0;                }                imgArr[currentIndex].style.left = imgWidth + "px";    //因为索引加1后，当前索引对应的图片放在盒子右边，并开始移动                animate(imgArr[currentIndex],{left:0});                for(var i = 0; i < imgArr.length; i++){     //排他思想设置序列的背景                    listArr[i].className = "slider-control-bar";                }                listArr[currentIndex].className = "slider-control-bar current";            }            function preImg(){              //向前移                animate(imgArr[currentIndex],{left:imgWidth});       //当前索引的图片移到右边                currentIndex--;         //索引减1                if(currentIndex < 0){     //如果索引减小于0，则切换到最后一张图片的索引                    currentIndex = imgArr.length-1;                }                imgArr[currentIndex].style.left = -imgWidth + 'px';       //因为索引改变，所以当前索引的图片放在盒子左边，然后右移                animate(imgArr[currentIndex],{left:0});                for(var i = 0; i < imgArr.length; i++){      //排他思想设置序列的背景                    listArr[i].className = "slider-control-bar";                }                listArr[currentIndex].className = "slider-control-bar current";            }            var timer = setInterval(nextImg,4000);   //开启定时器，自动播放            pre.onclick = preImg;       //当点击左侧方块的时候，开启左移            next.onclick = nextImg;      //当点击右侧方块的时候，开启右移            box.onmouseover = function(){    //鼠标放在盒子上，清除定时器                clearInterval(timer);            }            box.onmouseout = function(){    //鼠标移开，继续                timer = setInterval(nextImg,4000);            }        }    **//下面是封装的缓动动画函数，详细请点击下文链接**            function animate(ele,json,fn){        clearInterval(ele.timer);        ele.timer = setInterval(function(){            var bool = true;            for(k in json){                if(k == "opacity"){                    var leader = parseInt(getStyle(ele,k)*100) || 1;                }else{                    var leader = parseInt(getStyle(ele,k)) || 0;                }                                               var step = (json[k] - leader) / 10;                step = step > 0 ? Math.ceil(step) : Math.floor(step);                   leader = leader + step;                             if(k == "opacity"){                                 // console.log(leader);                         ele.style[k] = leader / 100;                    ele.style.filter = "alpha(opacity=" + leader + ")";                }else if(k == "zIndex"){                    ele.style[k] = leader;                }else{                    ele.style[k] = leader + "px";                }                if(leader !== json[k]){                    bool = false;                }                                                                       }            if(bool){                clearInterval(ele.timer);                if(typeof fn == 'function'){                    fn();                }            }        },25);    }    function getStyle(ele,attr){        if(window.getComputedStyle){            return window.getComputedStyle(ele,null)[attr];        }else{            return ele.currentStyle[attr];        }    }

第一种轮播图链接：http://blog.csdn.net/qq_33599109/article/details/77249062
缓动动画函数封装：http://blog.csdn.net/qq_33599109/article/details/77257182

作者：kuke_kuke
博客链接：http://blog.csdn.net/qq_33599109
欢迎关注支持，谢谢！