jquery實現圖片輪番效果（一）

最近因項目功能需要，就研究了js實現多張圖片輪番展示的功能。廢話不多說，直接上代碼

效果圖：

1、顯示頁面效果的代碼，在裏定義輪番的圖片

<div id="wrapper">
            <!-- 最外層部分 -->
            <div id="banner">
                <!-- 輪播部分 -->
                <ul class="imgList">
                    <!-- 圖片部分 -->
                    <li>
                        <a href="#"><img src="img/shiti.png" width="400px" height="200px" alt="puss in boots1"></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/312_20161009162348.png" width="400px" height="200px" alt="puss in boots2"></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/312_20161009162444.png" width="400px" height="200px" alt="puss in boots3"></a>
                    </li>
                    <li>
                        <a href="#"><img src="img/1.png" width="400px" height="200px" alt="puss in boots4"></a>
                    </li>       
                </ul>
        <img src="img/left.png" width="20px" height="40px" id="prev"> 
                <img src="img/right.png" width="20px" height="40px" id="next">
                <div class="bg"></div>
                <!-- 圖片底部背景層部分-->
                <ul class="infoList">
                    <!-- 圖片左下角文字信息部分 -->
                    <li class="infoOn">puss in boots1</li>
                    <li>puss in boots2</li>
                    <li>puss in boots3</li>
                    <li>puss in boots4</li>
                </ul>
            <ul class="indexList">
                    <!-- 圖片右下角序號部分 -->
                    <li class="indexOn">1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                </ul>
            </div>

        </div>

2、定義輪番圖片的樣式

<style type="text/css">
            body,
            div,
            ul,
            li,
            a,
            img {
                margin: 0;
                padding: 0;
            }

            ul,
            li {
                list-style: none;
            }

            a {
                text-decoration: none;
            }

            #wrapper {
                position: relative;
                margin: 30px auto;
                width: 400px;
                height: 200px;
            }

            #banner {
                position: relative;
                width: 400px;
                height: 200px;
                overflow: hidden;
            }

            .imgList {
                position: relative;
                width: 2000px;
                height: 200px;
                z-index: 10;
                overflow: hidden;
            }

            .imgList li {
                float: left;
                display: inline;
            }

            #prev,
            #next {
                position: absolute;
                top: 80px;
                z-index: 20;
                cursor: pointer;
                opacity: 1;
                filter: alpha(opacity=20);
            }

            #prev {
                left: 10px;
            }

            #next {
                right: 10px;
            }

            #prev:hover,
            #next:hover {
                opacity: 0.5;
                filter: alpha(opacity=50);
            }

            .bg {
                position: absolute;
                bottom: 0;
                width: 400px;
                height: 40px;
                z-index: 20;
                opacity: 0.4;
                filter: alpha(opacity=40);
                background: black;
            }

            .infoList {
                position: absolute;
                left: 10px;
                bottom: 10px;
                z-index: 30;
            }

            .infoList li {
                display: none;
            }

            .infoList .infoOn {
                display: inline;
                color: white;
            }

            .indexList {
                position: absolute;
                right: 10px;
                bottom: 5px;
                z-index: 30;
            }

            .indexList li {
                float: left;
                margin-right: 5px;
                padding: 2px 4px;
                border: 2px solid black;
                background: grey;
                cursor: pointer;
            }

            .indexList .indexOn {
                background: red;
                font-weight: bold;
                color: white;
            }
        </style>

3、js實現輪番事件

<script type="text/javascript">
            var curIndex = 0, //當前index     
            imgArr = $(".imgList li"), //獲取圖片組     
            imgLen = imgArr.length,    
            infoArr = $(".infoList li"), //獲取圖片info組   
            indexArr =$(".indexListli") ; //獲取控制index組     
            // 定時器自動變換2.5秒每次  
            var autoChange = setInterval(function(){     
                if(curIndex < imgLen -1){  
                    curIndex ++;     
                }else{     
                    curIndex = 0;   
                }     
                //調用變換處理函數
                changeTo(curIndex); 
            },2500);     
            //清除定時器時候的重置定時器--封裝 
            function autoChangeAgain(){ 
                autoChange = setInterval(function(){ 
                    if(curIndex < imgLen -1){     
                        curIndex ++;      
                    }else{     
                        curIndex = 0;   
                    }    
                    //調用變換處理函數     
                    changeTo(curIndex);  
                },2500);  
            }     //調用添加事件處理   
            addEvent();   
            //給左右箭頭和右下角的圖片index添加事件處理 
            function addEvent(){  
                for(var i=0;i<imgLen;i++){ 
                    //閉包防止作用域內活動對象item的影響   
                    (function(_i){   
                        //鼠標滑過則清除定時器，並作變換處理    
                        indexArr[_i].onmouseover = function(){ 
                            clearTimeout(autoChange);   
                            changeTo(_i);    
                            curIndex = _i;  
                        };     
                        //鼠標滑出則重置定時器處理   
                        indexArr[_i].onmouseout = function(){  
                            autoChangeAgain(); 
                        };    
                    })(i);  
                }    
                //給左箭頭prev添加上一個事件   
                var prev = document.getElementById("prev");  
                prev.onmouseover = function(){   
                    //滑入清除定時器     
                    clearInterval(autoChange);
                };   prev.onclick = function(){   
                    //根據curIndex進行上一個圖片處理  
                    curIndex = (curIndex > 0) ? (--curIndex) : (imgLen - 1); 
                    changeTo(curIndex);   
                };   
                prev.onmouseout = function(){  
                    //滑出則重置定時器  
                    autoChangeAgain(); 
                };     
                //給右箭頭next添加下一個事件  
                var next = document.getElementById("next");  
                next.onmouseover = function(){  
                    clearInterval(autoChange);  
                };  
                next.onclick = function(){  
                    curIndex = (curIndex < imgLen - 1) ? (++curIndex) : 0; 
                    changeTo(curIndex); 
                };   
                next.onmouseout = function(){
                    autoChangeAgain(); 
                }; }   
                //左右切換處理函數   
                function changeTo(num){   
                    //設置image  
                    var imgList = getElementsByClassName("imgList")[0]; 
                    goLeft(imgList,num*400); 
                    //左移一定距離     //設置image 的 info   
                    var curInfo = getElementsByClassName("infoOn")[0];   
                    removeClass(curInfo,"infoOn");   
                    addClass(infoArr[num],"infoOn");    
                    //設置image的控制下標 index    
                    var _curIndex = getElementsByClassName("indexOn")[0];  
                    removeClass(_curIndex,"indexOn");   
                    addClass(indexArr[num],"indexOn");   
                }      
                //圖片組相對原始左移dist px距離  
                function goLeft(elem,dist){  
                    if(dist == 400){ 
                        //第一次時設置left爲0px 或者直接使用內嵌法 style="left:0;"  
                        elem.style.left = "0px"; 
                    }     
                    var toLeft; 
                    //判斷圖片移動方向是否爲左     
                    dist = dist + parseInt(elem.style.left); 
                    //圖片組相對當前移動距離    
                    if(dist<0){     
                        toLeft = false;    
                        dist = Math.abs(dist);  
                    }else{     
                        toLeft = true;   
                    }     
                    for(var i=0;i<= dist/20;i++){ 
                        //這裏設定緩慢移動，10階每階40px  
                        (function(_i){     
                            var pos = parseInt(elem.style.left); //獲取當前left    
                            setTimeout(function(){       
                                pos += (toLeft)? -(_i * 20) : (_i * 20);
                                //根據toLeft值指定圖片組位置改變           //console.log(pos);   
                                elem.style.left = pos + "px";     
                            },_i * 25); 
                            //每階間隔50毫秒    
                            })(i);   
                    }  
                }    
                //通過class獲取節點  
                function getElementsByClassName(className){   
                    var classArr = [];   
                    var tags = document.getElementsByTagName('*'); 
                    for(var item in tags){     
                        if(tags[item].nodeType == 1){  
                            if(tags[item].getAttribute('class') == className){ 
                                classArr.push(tags[item]);     
                            }      
                        }    
                    }     
                    return classArr; //返回  
                    }    
                    // 判斷obj是否有此class  
                    function hasClass(obj,cls){ 
                        //class位於單詞邊界     
                        return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)')); 
                    }   
                    //給 obj添加class 
                    function addClass(obj,cls){  
                        if(!this.hasClass(obj,cls)){  
                            obj.className += cls;   
                        }   
                    }  
                    //移除obj對應的class 
                    function removeClass(obj,cls){
                        if(hasClass(obj,cls)){   
                            var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');  
                            obj.className = obj.className.replace(reg,''); 
                        }
                        }
        </script>