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

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

本文實(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í)有所幫助，也希望大家多多支持我們。

上一篇：Javascript實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊冒泡特效

欄目：JavaScript

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

本文標(biāo)題：JS實(shí)現(xiàn)圖片切換特效

本文地址：http://www.jygsgssxh.com/a1/JavaScript/9410.html

更多JavaScript

雷火电竞-中国电竞赛事及体育赛事平台

JavaScript

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

您可能感興趣的文章

閱讀排行

本欄相關(guān)

隨機(jī)閱讀