纯JS实现轮播图特效——详解

Posted 2021-01-14 littleboyck

   <div id="slider">
            
            <div id="sliderImgs">
                <img src="img/mi04.jpg" width="1000px"/>
                
                <img src="img/mi01.jpg" width="1000px" title="oneImg"/>
                <img src="img/mi02.jpg" width="1000px" title="twoImg"/>
                <img src="img/mi03.jpg" width="1000px" title="threeImg"/>
                <img src="img/mi04.jpg" width="1000px" title="fourImg"/>
                
                <img src="img/mi01.jpg" width="1000px"/>
                
                <!--因为要做无缝滚动，所以要克隆第一张和最后一张，放到最后一张后面和最前面-->
            </div>
            
            <div id="buttons">
                <ul>
                    <li class="active"></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>

            <div>
                <span id="prev">&lt;</span>
                <span id="next">&gt;</span>
            </div>

        </div>
        

CSS部分

<style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            /*禁止html元素别被鼠标选中,必须要写不然会有bug,--start*/
            *{
                moz-user-select: -moz-none;
                -moz-user-select: none;
                -o-user-select:none;
                -khtml-user-select:none;
                -webkit-user-select:none;
                -ms-user-select:none;
                user-select:none;
            }    
            /*禁止html元素别被鼠标选中--end*/
            
            #slider{
                width: 1000px;                /*设置为图片宽度*/
                height: 376px;                /*设置为图片高度*/
                margin: 0 auto;
                margin-top: 100px;
                overflow: hidden;
                position: relative;
                /*border: 2px solid palegreen;*/
            }
            #sliderImgs{
                width: 600%;                /*几张图片就是  6*100%  */
                position: absolute;            /*必须设置绝对定位，才能使用left属性*/
                left: -1000px;                /*把第一张假图偏移出去*/                    
                /*border: 1px solid blue;*/
            }
            #sliderImgs img{
                float: left;
            }
            
            
            #buttons{
                width: 70px;
                position: absolute;
                z-index: 1;                /*设置图片堆叠属性，仅限于定位的元素使用。默认值为0，值越大，优先级越高*/
                bottom: 10px;
                left: 45%;
                background-color: rgba(255,255,255,0.4);
                
                padding-top: 4px;
                padding-bottom: 4px;
                border-radius: 9px;                    /*高度一半 = 8px + 10px (li的height) */
                /*border: 2px solid red;*/
            }
            #buttons ul{
                list-style-type: none;
            }
            #buttons ul li{
                float: left;
                margin-left: 6px;
                width: 10px;
                height: 10px;
                line-height: 10px;
                border-radius: 100%;
                background-color: #FFFFFF;
            }
            #buttons ul li:hover{
                cursor: pointer; /*手型光标*/
                background-color:#FF5000;
            }
            #buttons .active{
                background-color: #FF5000;
            }
            #next , #prev{
                position: absolute;
                z-index: 1;
                top: 43%;
                color: rgba(255,255,255,.9);
                font-family: "微软雅黑";
                font-size: 25px;
                text-align: center;
                display: block;
                width: 40px ;
                height: 40px;
                line-height: 40px;
                border-radius: 100%;
                background-color: rgba(0,0,0,.4);
                transition: width 0.3s ,height 0.3s ,line-height 0.3s ,border-radius 0.3s, text-align 0.3s ,ease 0.3s ;
            }
            #prev{
                left: 5%;
            }
            #next{
                right: 5%;
            }
            #next:hover{
                cursor: pointer; /*手型光标*/
                
                width: 44px;
                height: 44px;
                line-height: 44px;
                border-radius:100%;
                text-align: center;
            }
            #prev:hover{
                cursor: pointer; /*手型光标*/
                
                width: 44px;
                height: 44px;
                line-height: 44px;
                border-radius:100% ;
                text-align: center;
            }
        </style>

布局效果图：

 

JS部分

<script type="text/javascript">
            var doc = document;
            var sliderId = doc.getElementById(‘slider‘);
            var sliderImgsId = doc.getElementById(‘sliderImgs‘);
            var imgs = sliderImgsId.getElementsByTagName(‘img‘);
            var btnLi = doc.getElementById(‘buttons‘).getElementsByTagName(‘li‘);
            var btnPrev = doc.getElementById(‘prev‘);
            var btnNext = doc.getElementById(‘next‘);
            
            var imgsLength = imgs.length-2;                    //减去2个假图
            var btnLiLength = btnLi.length;
            var imgWidth = sliderId.clientWidth;            //获取图片宽度
            var imgAnimateTimer = null;                        //图片animate定时器
            var aotuPlayTimer = null;                        //自动播放定时器
            var index = 0;                                    //当前图片默认为第一张
            var speed = 0;                                  //动画速度,这个数必须是能被图片宽度500整除的。正负表示偏移方向
            
            /*非常重要*/
            var isAnimate = false;                            //图片是否在动画状态。若在动画状态，此时动画没结束， 则不执行下一个动画。

            sliderImgsId.style.left = -imgWidth+"px";        //初始化为第一张真图
            
            btnPrev.onclick = function(){
                if(isAnimate == false){        //图片不在动画状态才执行
                    imgAnimate(imgWidth);
                    index--;
                    if(index<0){
                        index = imgsLength-1;
                    }
                    selectBtn();
                }
            }
            btnNext.onclick = function(){
                if(isAnimate == false){
                    imgAnimate(-imgWidth);
                    index++;
                    if(index>imgsLength-1){
                        index = 0;
                    }
                    selectBtn();
                }
            }
            
            
            
            for(var i = 0 ; i<btnLiLength;i++){
                btnLi[i].index = i;
                btnLi[i].onclick = function(){
                    var toTargetImgOffset = (index - this.index)*imgWidth;    //负数sliderimgsId向左偏转，反之，向右
                    if(toTargetImgOffset == 0){return;}
                    
                    if(isAnimate == false){
                        imgAnimate(toTargetImgOffset);                        //方法的参数是局部参数
                        index = this.index;
                        selectBtn();
                    }                    
                    
                }
            }
            
            function selectBtn(){
                for(var i = 0; i < btnLiLength; i++){
                    if(btnLi[i].className == "active"){
                        btnLi[i].className = "";
                        break;
                    }
                }
                btnLi[index].className = ‘active‘; 
            }
            
            
            /*动画函数*/
            function imgAnimate(offset){
                var newLeft = parseInt(sliderImgsId.style.left) + offset;            //sliderImgsId.style.left永远获取都是当前图片偏移量
                var allTime = 400;                                                    //完成offset偏移量，总共所用时间。offset路程一定，时间越短，速度越快。此时间必须小于autoPlay间隔时间，否则，图片运动还没结束，ImgAnimate()再次被调用
                var interval = 20;                                                    //定时器的间隔时间，值越小越好，因为越大，动画越卡
                var speed = offset/(allTime/interval);                                //speed正负由offset决定
                
                isAnimate = true;                                                    //图片动画开始
                clearInterval(imgAnimateTimer);
                imgAnimateTimer = setInterval(function(){
                    sliderImgsId.style.left = parseInt(sliderImgsId.style.left)+speed +"px";
                    /* 第一种情况：当speed<0时,(即图片向左运动时)
                     * 如果当前图片left值 , left只会越来越小 , 当小于等于newLeft , 则停止图片运动
                     * 第二种情况：当speed>0时,(即图片向右运动时)
                     * 如果当前图片的left , left只会越来越大 , 大于等于newLeft , 则停止图片运动
                     * */
                    if( speed<0 && parseInt(sliderImgsId.style.left)<= newLeft || speed>0 && parseInt(sliderImgsId.style.left) >= newLeft){
                        clearInterval(imgAnimateTimer);                    //到达指定newleft位置停止动画
                        isAnimate = false;                                //动画执行结束
                        
                        /*重新定位-- 让图片无限循环 --start*/
                        if(newLeft > -imgWidth){
                            sliderImgsId.style.left = -imgsLength*imgWidth +"px" ;
                            return;
                        }
                        if(newLeft < -imgsLength*imgWidth){                
                            sliderImgsId.style.left = -imgWidth +"px" ;
                            return;
                        }
                        sliderImgsId.style.left = newLeft+"px";
                        /*重新定位--  让图片无限循环  --end*/
                        
                        /*图片运动结束后。清除上一次定时器时间*/
                        window.onload();
                    }
                },interval);
            }
            
            
            window.onload = function(){
                if(isAnimate==false){
                    clearInterval(aotuPlayTimer);
                    aotuPlayTimer = setInterval(function(){
                        btnNext.onclick();
                    },5000);                                //图片每格5s移动一次
                }
            }
            /*鼠标移入sliderId事件*/
            sliderImgsId.onmouseover = function(){
                clearInterval(aotuPlayTimer);
            }
            /*鼠标移出sliderId事件*/
            sliderImgsId.onmouseout =function(){
                window.onload();
            }
            
 </script>