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

更新時間：2019年12月23日 17:11:52 作者：KaiSarH

這篇文章主要為大家詳細(xì)介紹了JS實現(xiàn)圖片切換特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

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

知識點：

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

運(yù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. 點擊
    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)文章

一個很Cool的JS菜單效果
[藍(lán)色]一個很Cool的JS菜單效果...
2006-09-09
JavaScript 中 apply 、call 的詳解
本文主要介紹了JavaScript中apply 、call的相關(guān)知識。具有很好的參考價值。下面跟著小編一起來看下吧
2017-03-03
js算法實例之字母大小寫轉(zhuǎn)換
實現(xiàn)javascript?英文首字母大寫有多種方法,下面這篇文章主要給大家介紹了關(guān)于js算法實例之字母大小寫轉(zhuǎn)換的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-12-12
JavaScript webpack模塊打包器如何優(yōu)化前端性能
本系列主要整理前端面試中需要掌握的知識點。本節(jié)介紹webpack如何優(yōu)化前端性能，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-08-08
vue 集成騰訊地圖實現(xiàn)api(附DEMO)
之前項目使用騰訊地圖，不利于開發(fā)者查找，這篇文章主要介紹了vue 集成騰訊地圖實現(xiàn)api，具有一定的參考價值，感興趣的可以了解下
2021-07-07
JS實現(xiàn)的類似微信聊天效果示例
這篇文章主要介紹了JS實現(xiàn)的類似微信聊天效果,可實現(xiàn)模擬微信聊天效果的對話框信息傳輸,涉及javascript事件響應(yīng)及頁面元素屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下
2019-01-01
javascript中this的四種用法
在javascript當(dāng)中每一個function都是一個對象，所以在這個里var temp=this 指的是function當(dāng)前的對象。this是Javascript語言的一個關(guān)鍵字。它代表函數(shù)運(yùn)行時，自動生成的一個內(nèi)部對象，只能在函數(shù)內(nèi)部使用。
2015-05-05
webpack配置proxyTable時pathRewrite無效的解決方法
這篇文章主要介紹了webpack配置proxyTable時pathRewrite無效的解決方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-12-12
微信小程序云函數(shù)使用mysql數(shù)據(jù)庫過程詳解
這篇文章主要介紹了微信小程序云函數(shù)使用mysql數(shù)據(jù)庫過程詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2019-08-08
js實現(xiàn)幻燈片輪播圖
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)幻燈片輪播圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-08-08