欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS實(shí)現(xiàn)圖片切換特效

 更新時間：2019年12月23日 17:11:52   作者：KaiSarH  
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)圖片切換特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了JS實(shí)現(xiàn)圖片切換的具體代碼，供大家參考，具體內(nèi)容如下

知識點(diǎn)：

1.window.onload網(wǎng)頁全部加載完后再執(zhí)行
2.獲取元素 設(shè)置屬性
3.臨界情況判斷

運(yùn)行效果：

點(diǎn)擊上一張下一章切換圖片

代碼：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<style>
  #box{
    width: 1200px;
    margin: 0 auto;
  }
</style>
<body>
  <div id="box">
    <img id="icon" src="images/阿魯1.gif" alt="">
    <p></p>
    <button id="prep">上一張</button>
    <button id="next">下一張</button>
  </div>
<script>
  window.onload = function (ev) {
    // 1. 獲取標(biāo)簽
    var prep = document.getElementById('prep');
    var next = document.getElementById('next');
    var icon = document.getElementById('icon');
    // 2. 點(diǎn)擊
    var currentIndex = 1, minIndex=1, maxIndex=10;
    prep.onclick = function (ev1) {
      if (currentIndex === minIndex){
        currentIndex = maxIndex;
      }else{
        currentIndex--;
      }
      icon.setAttribute('src','images/阿魯'+ currentIndex +'.gif');
    };
    next.onclick = function (ev1) {
      if (currentIndex === maxIndex){
        currentIndex = minIndex;
      }else {
        currentIndex++;
      }
      icon.setAttribute('src','images/阿魯'+ currentIndex +'.gif');
    }
  }
</script>
</body>
</html>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論