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

來源：本站原創(chuàng)|時間：2020-01-10|欄目：JavaScript|點擊：次

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

知識點：

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

運行效果：

點擊上一張下一章切換圖片

代碼：

<!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. 獲取標簽
    var prep = document.getElementById('prep');
    var next = document.getElementById('next');
    var icon = document.getElementById('icon');
    // 2. 點擊
    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>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持我們。

上一篇：Javascript實現(xiàn)鼠標點擊冒泡特效

欄目：JavaScript

下一篇：Vue移動端實現(xiàn)圖片上傳及超過1M壓縮上傳

本文標題：JS實現(xiàn)圖片切換特效

本文地址：http://mengdiqiu.com.cn/a1/JavaScript/9410.html

更多JavaScript

欧美大屁股bbbbxxxx,狼人大香伊蕉国产www亚洲,男ji大巴进入女人的视频小说,男人把ji大巴放进女人免费视频,免费情侣作爱视频

JavaScript

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

您可能感興趣的文章

閱讀排行

本欄相關

隨機閱讀