圖片輪播(左右切換)--JS原生和jQuery實現

時間 2019-11-11

原文原文鏈接

圖片輪播(左右切換)--js原生和jquery實現javascript

左右切換的作法基本步驟跟上一篇文章 淡入淡出 相似，只不過修改了一些特定的部分css

（1）首先是頁面的結構部分html

對於我這種左右切換式java

1.首先是個外圍部分（其實也就是最外邊的總體wrapper)

2.接着就是你設置圖片輪播的地方（也就是一個banner吧）

3.而後是一個圖片組（能夠用新的div 也能夠直接使用 ul-->li形式）node

4.而後是圖片兩端的左箭頭和右箭頭
5.而後是一個透明背景層，放在圖片底部

6.而後是一個圖片描述info層，放在透明背景層的左下角（div 或 ul-->li)

7.而後是一個按鈕層，用來定位圖片組的index吧,放在透明背景層的右下角(div 或 ul-->li)

jquery

由此，能夠先構造出html結構閉包

<div id="wrapper"><!-- 最外層部分 -->
        <div id="banner"><!-- 輪播部分 -->
            <ul class="imgList"><!-- 圖片部分 -->
            <li><a href="#"><img src="./img/test1.jpg" width="400px" height="200px" alt="puss in boots1"></a></li>
            <li><a href="#"><img src="./img/test2.jpg" width="400px" height="200px" alt="puss in boots2"></a></li>
            <li><a href="#"><img src="./img/test3.jpg" width="400px" height="200px" alt="puss in boots3"></a></li>
            <li><a href="#"><img src="./img/test4.jpg" width="400px" height="200px" alt="puss in boots4"></a></li>
            <li><a href="#"><img src="./img/test5.jpg" width="400px" height="200px" alt="puss in boots5"></a></li>
            </ul>
            <img src="./img/prev.png" width="20px" height="40px" id="prev">
            <img src="./img/next.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>
                <li>puss in boots5</li>
            </ul>
            <ul class="indexList"><!-- 圖片右下角序號部分 -->
                <li class="indexOn">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>
        </div>
    </div>

相對於以前，知識增多了兩個箭頭img標籤app

（2）CSS樣式部分（圖片組的處理）跟淡入淡出式就不同了ide

淡入淡出只須要顯示或者隱藏對應序號的圖片就好了，直接經過display來設定函數

左右切換式則是採用圖片li 浮動，父層元素ul 總寬爲總圖片寬，並設定爲有限banner寬度下隱藏超出寬度的部分

而後當想切換到某序號的圖片時，則採用其ul 定位 left樣式設定相應屬性值實現

好比顯示第一張圖片初始定位left爲0px, 要想顯示第二張圖片則須要left:-400px 處理

<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: 0.2;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的處理了

1、jQuery方式 demo

照常先說jq處理

1.全局變量等

 var curIndex = 0,  //當前index
            imgLen = $(".imgList li").length;  //圖片總數

2.自動切換定時器處理

      // 定時器自動變換2.5秒每次
    var autoChange = setInterval(function(){ 
        if(curIndex <  imgLen-1){ 
            curIndex ++; 
        }else{ 
            curIndex = 0;
        }
        //調用變換處理函數
        changeTo(curIndex);  
    },2500);

3.爲左右箭頭添加事件處理

左箭頭

    //左箭頭滑入滑出事件處理
    $("#prev").hover(function(){ 
        //滑入清除定時器
        clearInterval(autoChange);
    },function(){ 
        //滑出則重置定時器
        autoChangeAgain();
    });
    //左箭頭點擊處理
    $("#prev").click(function(){ 
        //根據curIndex進行上一個圖片處理
        curIndex = (curIndex > 0) ? (--curIndex) : (imgLen - 1);
        changeTo(curIndex);
    });

右箭頭

 //右箭頭滑入滑出事件處理
   $("#next").hover(function(){ 
        //滑入清除定時器
        clearInterval(autoChange);
    },function(){ 
        //滑出則重置定時器
        autoChangeAgain();
    });
    //右箭頭點擊處理
    $("#next").click(function(){ 
        curIndex = (curIndex < imgLen - 1) ? (++curIndex) : 0;
        changeTo(curIndex);
    });

其中autoChangeAgain()就是一個重置定時器函數

//清除定時器時候的重置定時器--封裝
    function autoChangeAgain(){ 
            autoChange = setInterval(function(){ 
            if(curIndex < imgLen-1){ 
                curIndex ++;
            }else{ 
                curIndex = 0;
            }
        //調用變換處理函數
            changeTo(curIndex);  
        },2500);
        }

其中changeTo()就是一個圖片切換的處理函數

function changeTo(num){ 
        var goLeft = num *  400;
        $(".imgList").animate({left: "-" + goLeft + "px"},500);
        $(".infoList").find("li").removeClass("infoOn").eq(num).addClass("infoOn");
        $(".indexList").find("li").removeClass("indexOn").eq(num).addClass("indexOn");
    }

每傳入一個圖片序號，則按理進行goLeft

4.爲右下角的那幾個li 按鈕綁定事件處理

//對右下角按鈕index進行事件綁定處理等
    $(".indexList").find("li").each(function(item){ 
        $(this).hover(function(){ 
            clearInterval(autoChange);
            changeTo(item);
            curIndex = item;
        },function(){ 
            autoChangeAgain();
        });
    });

jq就是這樣，簡便，原生代碼量就有些多了

完整代碼

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5 <title>圖片輪播 jq(左右切換)</title>
  6 <style type="text/css">
  7     body,div,ul,li,a,img{margin: 0;padding: 0;}
  8     ul,li{list-style: none;}
  9     a{text-decoration: none;}
 10 
 11     #wrapper{position: relative;margin: 30px auto;width: 400px;height: 200px;}
 12     #banner{position:relative;width: 400px;height: 200px;overflow: hidden;}
 13     .imgList{position:relative;width:2000px;height:200px;z-index: 10;overflow: hidden;}
 14     .imgList li{float:left;display: inline;}
 15     #prev,
 16     #next{position: absolute;top:80px;z-index: 20;cursor: pointer;opacity: 0.2;filter:alpha(opacity=20);}
 17     #prev{left: 10px;}
 18     #next{right: 10px;}
 19     #prev:hover,
 20     #next:hover{opacity: 0.5;filter:alpha(opacity=50);}
 21     .bg{position: absolute;bottom: 0;width: 400px;height: 40px;z-index:20;opacity: 0.4;filter:alpha(opacity=40);background: black;}
 22     .infoList{position: absolute;left: 10px;bottom: 10px;z-index: 30;}
 23     .infoList li{display: none;}
 24     .infoList .infoOn{display: inline;color: white;}
 25     .indexList{position: absolute;right: 10px;bottom: 5px;z-index: 30;}
 26     .indexList li{float: left;margin-right: 5px;padding: 2px 4px;border: 2px solid black;background: grey;cursor: pointer;}
 27     .indexList .indexOn{background: red;font-weight: bold;color: white;}
 28 </style>
 29 </head>
 30 <body>
 31     <div id="wrapper"><!-- 最外層部分 -->
 32         <div id="banner"><!-- 輪播部分 -->
 33             <ul class="imgList"><!-- 圖片部分 -->
 34                 <li><a href="#"><img src="./img/test1.jpg" width="400px" height="200px" alt="puss in boots1"></a></li>
 35             <li><a href="#"><img src="./img/test2.jpg" width="400px" height="200px" alt="puss in boots2"></a></li>
 36             <li><a href="#"><img src="./img/test3.jpg" width="400px" height="200px" alt="puss in boots3"></a></li>
 37             <li><a href="#"><img src="./img/test4.jpg" width="400px" height="200px" alt="puss in boots4"></a></li>
 38             <li><a href="#"><img src="./img/test5.jpg" width="400px" height="200px" alt="puss in boots5"></a></li>
 39             </ul>
 40             <img src="./img/prev.png" width="20px" height="40px" id="prev">
 41             <img src="./img/next.png" width="20px" height="40px" id="next">
 42             <div class="bg"></div> <!-- 圖片底部背景層部分-->
 43             <ul class="infoList"><!-- 圖片左下角文字信息部分 -->
 44                 <li class="infoOn">puss in boots1</li>
 45                 <li>puss in boots2</li>
 46                 <li>puss in boots3</li>
 47                 <li>puss in boots4</li>
 48                 <li>puss in boots5</li>
 49             </ul>
 50             <ul class="indexList"><!-- 圖片右下角序號部分 -->
 51                 <li class="indexOn">1</li>
 52                 <li>2</li>
 53                 <li>3</li>
 54                 <li>4</li>
 55                 <li>5</li>
 56             </ul>
 57         </div>
 58     </div>
 59     <script type="text/javascript" src="./js/jquery.min.js"></script>
 60     <script type="text/javascript">
 61     var curIndex = 0,  //當前index
 62             imgLen = $(".imgList li").length;  //圖片總數
 63           // 定時器自動變換2.5秒每次
 64     var autoChange = setInterval(function(){ 
 65         if(curIndex <  imgLen-1){ 
 66             curIndex ++; 
 67         }else{ 
 68             curIndex = 0;
 69         }
 70         //調用變換處理函數
 71         changeTo(curIndex);  
 72     },2500);
 73 
 74      //左箭頭滑入滑出事件處理
 75     $("#prev").hover(function(){ 
 76         //滑入清除定時器
 77         clearInterval(autoChange);
 78     },function(){ 
 79         //滑出則重置定時器
 80         autoChangeAgain();
 81     });
 82     //左箭頭點擊處理
 83     $("#prev").click(function(){ 
 84         //根據curIndex進行上一個圖片處理
 85         curIndex = (curIndex > 0) ? (--curIndex) : (imgLen - 1);
 86         changeTo(curIndex);
 87     });
 88     
 89     //右箭頭滑入滑出事件處理
 90    $("#next").hover(function(){ 
 91         //滑入清除定時器
 92         clearInterval(autoChange);
 93     },function(){ 
 94         //滑出則重置定時器
 95         autoChangeAgain();
 96     });
 97     //右箭頭點擊處理
 98     $("#next").click(function(){ 
 99         curIndex = (curIndex < imgLen - 1) ? (++curIndex) : 0;
100         changeTo(curIndex);
101     });
102 
103     //對右下角按鈕index進行事件綁定處理等
104     $(".indexList").find("li").each(function(item){ 
105         $(this).hover(function(){ 
106             clearInterval(autoChange);
107             changeTo(item);
108             curIndex = item;
109         },function(){ 
110             autoChangeAgain();
111         });
112     });
113 
114     //清除定時器時候的重置定時器--封裝
115     function autoChangeAgain(){ 
116             autoChange = setInterval(function(){ 
117             if(curIndex < imgLen-1){ 
118                 curIndex ++;
119             }else{ 
120                 curIndex = 0;
121             }
122         //調用變換處理函數
123             changeTo(curIndex);  
124         },2500);
125         }
126 
127     function changeTo(num){ 
128         var goLeft = num *  400;
129         $(".imgList").animate({left: "-" + goLeft + "px"},500);
130         $(".infoList").find("li").removeClass("infoOn").eq(num).addClass("infoOn");
131         $(".indexList").find("li").removeClass("indexOn").eq(num).addClass("indexOn");
132     }
133     </script>
134 </body>
135 </html>

View Code

2、js 原生實現 demo

js原生大概也就是模擬jq的實現思路

1.全局變量等

var curIndex = 0,  //當前index
            imgArr = getElementsByClassName("imgList")[0].getElementsByTagName("li"), //獲取圖片組
            imgLen = imgArr.length,
            infoArr = getElementsByClassName("infoList")[0].getElementsByTagName("li"), //獲取圖片info組
            indexArr = getElementsByClassName("indexList")[0].getElementsByTagName("li"); //獲取控制index組

2.自動切換定時器處理

       // 定時器自動變換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);
        }

3.由於有一些class呀，因此來幾個class函數的模擬也是須要的

 //經過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,'');
        }
    }

4.要左右切換，就得模擬jq的animate-->left .

個人思路就是動態地設置element.style.left 進行定位。由於要有一個漸進的過程，因此加上的一點點階段處理。

定位的時候left的設置也是有點複雜的..要考慮方向等狀況

  //圖片組相對原始左移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);
        }
    }

上頭也看到了，我初始了left的值爲0px

我試過了，若是不初始或者把初始的left值寫在行內css樣式表裏邊，就總會報錯取不到

因此直接在js中初始化或者在html中內嵌初始化也可。

5.接下來就是切換的函數實現了，好比要切換到序號爲num的圖片

//左右切換處理函數
    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");
    }

6.而後再給左右箭頭還有右下角那堆index綁定事件處理

  //給左右箭頭和右下角的圖片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();
    };
}

7.最後的最後，沒啥了. 噢好像還要調用一下下那個 addEvent() ..

完整代碼 代碼量有些冗雜..

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5 <title>圖片輪播 js原生(左右切換)</title>
  6 <style type="text/css">
  7     body,div,ul,li,a,img{margin: 0;padding: 0;}
  8     ul,li{list-style: none;}
  9     a{text-decoration: none;}
 10 
 11     #wrapper{position: relative;margin: 30px auto;width: 400px;height: 200px;}
 12     #banner{position:relative;width: 400px;height: 200px;overflow: hidden;}
 13     .imgList{position:relative;width:2000px;height:200px;z-index: 10;overflow: hidden;}
 14     .imgList li{float:left;display: inline;}
 15     #prev,
 16     #next{position: absolute;top:80px;z-index: 20;cursor: pointer;opacity: 0.2;filter:alpha(opacity=20);}
 17     #prev{left: 10px;}
 18     #next{right: 10px;}
 19     #prev:hover,
 20     #next:hover{opacity: 0.5;filter:alpha(opacity=50);}
 21     .bg{position: absolute;bottom: 0;width: 400px;height: 40px;z-index:20;opacity: 0.4;filter:alpha(opacity=40);background: black;}
 22     .infoList{position: absolute;left: 10px;bottom: 10px;z-index: 30;}
 23     .infoList li{display: none;}
 24     .infoList .infoOn{display: inline;color: white;}
 25     .indexList{position: absolute;right: 10px;bottom: 5px;z-index: 30;}
 26     .indexList li{float: left;margin-right: 5px;padding: 2px 4px;border: 2px solid black;background: grey;cursor: pointer;}
 27     .indexList .indexOn{background: red;font-weight: bold;color: white;}
 28 </style>
 29 </head>
 30 <body>
 31     <div id="wrapper"><!-- 最外層部分 -->
 32         <div id="banner"><!-- 輪播部分 -->
 33             <ul class="imgList"><!-- 圖片部分 -->
 34                 <li><a href="#"><img src="./img/test1.jpg" width="400px" height="200px" alt="puss in boots1"></a></li>
 35             <li><a href="#"><img src="./img/test2.jpg" width="400px" height="200px" alt="puss in boots2"></a></li>
 36             <li><a href="#"><img src="./img/test3.jpg" width="400px" height="200px" alt="puss in boots3"></a></li>
 37             <li><a href="#"><img src="./img/test4.jpg" width="400px" height="200px" alt="puss in boots4"></a></li>
 38             <li><a href="#"><img src="./img/test5.jpg" width="400px" height="200px" alt="puss in boots5"></a></li>
 39             </ul>
 40             <img src="./img/prev.png" width="20px" height="40px" id="prev">
 41             <img src="./img/next.png" width="20px" height="40px" id="next">
 42             <div class="bg"></div> <!-- 圖片底部背景層部分-->
 43             <ul class="infoList"><!-- 圖片左下角文字信息部分 -->
 44                 <li class="infoOn">puss in boots1</li>
 45                 <li>puss in boots2</li>
 46                 <li>puss in boots3</li>
 47                 <li>puss in boots4</li>
 48                 <li>puss in boots5</li>
 49             </ul>
 50             <ul class="indexList"><!-- 圖片右下角序號部分 -->
 51                 <li class="indexOn">1</li>
 52                 <li>2</li>
 53                 <li>3</li>
 54                 <li>4</li>
 55                 <li>5</li>
 56             </ul>
 57         </div>
 58     </div>
 59     <script type="text/javascript">
 60     var curIndex = 0,  //當前index
 61             imgArr = getElementsByClassName("imgList")[0].getElementsByTagName("li"), //獲取圖片組
 62             imgLen = imgArr.length,
 63             infoArr = getElementsByClassName("infoList")[0].getElementsByTagName("li"), //獲取圖片info組
 64             indexArr = getElementsByClassName("indexList")[0].getElementsByTagName("li"); //獲取控制index組
 65           // 定時器自動變換2.5秒每次
 66     var autoChange = setInterval(function(){ 
 67         if(curIndex < imgLen -1){ 
 68             curIndex ++; 
 69         }else{ 
 70             curIndex = 0;
 71         }
 72         //調用變換處理函數
 73         changeTo(curIndex);  
 74     },2500);
 75 
 76     //清除定時器時候的重置定時器--封裝
 77     function autoChangeAgain(){ 
 78             autoChange = setInterval(function(){ 
 79             if(curIndex < imgLen -1){ 
 80                 curIndex ++;
 81             }else{ 
 82                 curIndex = 0;
 83             }
 84         //調用變換處理函數
 85             changeTo(curIndex);  
 86         },2500);
 87         }
 88 
 89     //調用添加事件處理
 90     addEvent();
 91 
 92     //給左右箭頭和右下角的圖片index添加事件處理
 93   function addEvent(){
 94     for(var i=0;i<imgLen;i++){ 
 95         //閉包防止做用域內活動對象item的影響
 96         (function(_i){  
 97         //鼠標滑過則清除定時器，並做變換處理
 98         indexArr[_i].onmouseover = function(){ 
 99             clearTimeout(autoChange);
100             changeTo(_i);
101             curIndex = _i;
102         };
103         //鼠標滑出則重置定時器處理
104         indexArr[_i].onmouseout = function(){ 
105             autoChangeAgain();
106         };
107          })(i);
108     }
109 
110     //給左箭頭prev添加上一個事件
111     var prev = document.getElementById("prev");
112     prev.onmouseover = function(){ 
113         //滑入清除定時器
114         clearInterval(autoChange);
115     };
116     prev.onclick = function(){ 
117         //根據curIndex進行上一個圖片處理
118         curIndex = (curIndex > 0) ? (--curIndex) : (imgLen - 1);
119         changeTo(curIndex);
120     };
121     prev.onmouseout = function(){ 
122         //滑出則重置定時器
123         autoChangeAgain();
124     };
125 
126      //給右箭頭next添加下一個事件
127     var next = document.getElementById("next");
128     next.onmouseover = function(){ 
129         clearInterval(autoChange);
130     };
131     next.onclick = function(){ 
132         curIndex = (curIndex < imgLen - 1) ? (++curIndex) : 0;
133         changeTo(curIndex);
134     };
135     next.onmouseout = function(){ 
136         autoChangeAgain();
137     };
138 }
139 
140     //左右切換處理函數
141     function changeTo(num){ 
142         //設置image
143         var imgList = getElementsByClassName("imgList")[0];
144         goLeft(imgList,num*400); //左移必定距離
145         //設置image 的 info
146         var curInfo = getElementsByClassName("infoOn")[0];
147         removeClass(curInfo,"infoOn");
148         addClass(infoArr[num],"infoOn");
149         //設置image的控制下標 index
150         var _curIndex = getElementsByClassName("indexOn")[0];
151         removeClass(_curIndex,"indexOn");
152         addClass(indexArr[num],"indexOn");
153     }
154 
155 
156     //圖片組相對原始左移dist px距離
157     function goLeft(elem,dist){ 
158         if(dist == 400){  //第一次時設置left爲0px 或者直接使用內嵌法 style="left:0;"
159             elem.style.left = "0px";
160         }
161         var toLeft;  //判斷圖片移動方向是否爲左
162         dist = dist + parseInt(elem.style.left);  //圖片組相對當前移動距離
163         if(dist<0){   
164             toLeft = false;
165             dist = Math.abs(dist);
166         }else{ 
167             toLeft = true;
168         }
169         for(var i=0;i<= dist/20;i++){  //這裏設定緩慢移動，10階每階40px
170             (function(_i){ 
171                 var pos = parseInt(elem.style.left); //獲取當前left
172                 setTimeout(function(){ 
173                     pos += (toLeft)? -(_i * 20) : (_i * 20);  //根據toLeft值指定圖片組位置改變
174                     //console.log(pos);
175                     elem.style.left = pos + "px";
176                 },_i * 25); //每階間隔50毫秒
177             })(i);
178         }
179     }
180 
181     //經過class獲取節點
182     function getElementsByClassName(className){ 
183         var classArr = [];
184         var tags = document.getElementsByTagName('*');
185         for(var item in tags){ 
186             if(tags[item].nodeType == 1){ 
187                 if(tags[item].getAttribute('class') == className){ 
188                     classArr.push(tags[item]);
189                 }
190             }
191         }
192         return classArr; //返回
193     }
194 
195     // 判斷obj是否有此class
196     function hasClass(obj,cls){    //class位於單詞邊界
197         return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
198       }
199       //給 obj添加class
200     function addClass(obj,cls){  
201         if(!this.hasClass(obj,cls)){ 
202               obj.className += cls;
203         }
204     }
205     //移除obj對應的class
206     function removeClass(obj,cls){  
207         if(hasClass(obj,cls)){ 
208             var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
209                  obj.className = obj.className.replace(reg,'');
210         }
211     }
212 
213     </script>
214 </body>
215 </html>

View Code

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。