圖片輪播

時間  2019-11-09
標籤 圖片 简体版
原文   原文鏈接

左右切換式：javascript

html結構css

< 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 >
CSS樣式部分（圖片組的處理）

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

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

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

<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>
1、jQuery方式
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");
  }jquery

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

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

 

完整代碼函數

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html xmlns = "http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" />
< title >圖片輪播 jq(左右切換)</ title >
< 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 >
</ head >
< body >
   < 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 >
< script type = "text/javascript" src = "./js/jquery.min.js" ></ script >
   < script type = "text/javascript" >
   var curIndex = 0, //當前index
       imgLen = $(".imgList li").length; //圖片總數
      // 定時器自動變換2.5秒每次
   var autoChange = setInterval(function(){
     if(curIndex < imgLen-1 ){
       curIndex ++;
     }else{
       curIndex = 0 ;
     }
     //調用變換處理函數
     changeTo(curIndex);
   },2500);
    //左箭頭滑入滑出事件處理
   $("#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);
   });
   //對右下角按鈕index進行事件綁定處理等
   $(".indexList").find("li").each(function(item){
     $(this).hover(function(){
       clearInterval(autoChange);
       changeTo(item);
       curIndex = item ;
     },function(){
       autoChangeAgain();
     });
   });
  //清除定時器時候的重置定時器--封裝
   function autoChangeAgain(){
       autoChange = setInterval (function(){
       if(curIndex < imgLen-1){
         curIndex ++;
       }else{
         curIndex = 0 ;
       }
     //調用變換處理函數
       changeTo(curIndex);
     },2500);
     }
   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");
   }
   </script>
</ body >
</ html >
2、js 原生實現
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 進行定位。由於要有一個漸進的過程，因此加上的一點點階段處理。
//圖片組相對原始左移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);
    }
  }
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();
   };
}
完整代碼 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html xmlns = "http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" />
< title >圖片輪播 js原生(左右切換)</ title >
< 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 >
</ head >
< body >
   < 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 >
< script type = "text/javascript" >
   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.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>
</ body >
</ html >
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程