亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

原生js和jquery實現(xiàn)圖片輪播特效

 更新時間：2015年04月23日 09:19:18   投稿：hebedich  
本文給大家分享的是使用原生JS和JQ兩種方法分別實現(xiàn)相同的圖片輪播特效，十分的實用，也非常方便大家對比學習原生js和jQuery，有需要的小伙伴可以參考下。

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

對于我這種左右切換式

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

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

3.然后是一個圖片組（可以用新的div 也可以直接使用 ul-->li形式）

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

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

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

由此，可以先構造出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標簽

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

淡入淡出只需要顯示或者隱藏對應序號的圖片就行了，直接通過display來設定

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

然后當想切換到某序號的圖片時，則采用其ul 定位 left樣式設定相應屬性值實現(xiàn)

比如顯示第一張圖片初始定位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）頁面基本已經(jīng)構建好久可以進行js的處理了

一、jQuery方式

照常先說jq處理

1.全局變量等

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

2.自動切換定時器處理

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

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

左箭頭

  //左箭頭滑入滑出事件處理
  $("#prev").hover(function(){ 
    //滑入清除定時器
    clearInterval(autoChange);
  },function(){ 
    //滑出則重置定時器
    autoChangeAgain();
  });
  //左箭頭點擊處理
  $("#prev").click(function(){ 
    //根據(jù)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()就是一個重置定時器函數(shù)

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

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

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就是這樣，簡便，原生代碼量就有些多了

完整代碼

<!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; //圖片總數(shù)
     // 定時器自動變換2.5秒每次
  var autoChange = setInterval(function(){ 
    if(curIndex < imgLen-1){ 
      curIndex ++; 
    }else{ 
      curIndex = 0;
    }
    //調用變換處理函數(shù)
    changeTo(curIndex); 
  },2500);
   //左箭頭滑入滑出事件處理
  $("#prev").hover(function(){ 
    //滑入清除定時器
    clearInterval(autoChange);
  },function(){ 
    //滑出則重置定時器
    autoChangeAgain();
  });
  //左箭頭點擊處理
  $("#prev").click(function(){ 
    //根據(jù)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;
      }
    //調用變換處理函數(shù)
      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>

二、js 原生實現(xiàn)

js原生大概也就是模擬jq的實現(xiàn)思路

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;
    }
    //調用變換處理函數(shù)
    changeTo(curIndex); 
  },2500);

同樣的，有一個重置定時器的函數(shù)

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

3.因為有一些class呀，所以來幾個class函數(shù)的模擬也是需要的

 //通過class獲取節(jié)點
  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 .

我的思路就是動態(tài)地設置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); //獲取當前l(fā)eft
        setTimeout(function(){ 
          pos += (toLeft)? -(_i * 20) : (_i * 20); //根據(jù)toLeft值指定圖片組位置改變
          //console.log(pos);
          elem.style.left = pos + "px";
        },_i * 25); //每階間隔50毫秒
      })(i);
    }
  }

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

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

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

5.接下來就是切換的函數(shù)實現(xiàn)了，比如要切換到序號為num的圖片

//左右切換處理函數(shù)
  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(){ 
    //根據(jù)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() ..

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

<!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;
    }
    //調用變換處理函數(shù)
    changeTo(curIndex); 
  },2500);

  //清除定時器時候的重置定時器--封裝
  function autoChangeAgain(){ 
      autoChange = setInterval(function(){ 
      if(curIndex < imgLen -1){ 
        curIndex ++;
      }else{ 
        curIndex = 0;
      }
    //調用變換處理函數(shù)
      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(){ 
    //根據(jù)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();
  };
}

  //左右切換處理函數(shù)
  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); //獲取當前l(fā)eft
        setTimeout(function(){ 
          pos += (toLeft)? -(_i * 20) : (_i * 20); //根據(jù)toLeft值指定圖片組位置改變
          //console.log(pos);
          elem.style.left = pos + "px";
        },_i * 25); //每階間隔50毫秒
      })(i);
    }
  }

  //通過class獲取節(jié)點
  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>

以上所述就是本文的全部內容了，希望大家能夠喜歡。

相關文章

最新評論