利用js來實現簡單圖片切換

3403771864 發布于2022-10-26 22:37 / 660人閱讀

　　利用js來實現簡單圖片切換怎么做？直奔主題吧。

　　我們要說下代碼的主要思路：

　　1、先給“下一張”和“上一張”兩個按鈕綁定單擊響應事件；

　　2、獲取img標簽對象，用于修改src屬性的值，實現圖片的切換；

　　3、切換圖片實質上就是修改img標簽里面src屬性的值；

　　4、創建一個數組用來保存圖片，這樣的話，在圖片切換的過程中操作起來會更加方便，只要操作數組的索引即可，如要切換到下一張，將imgArr[0]---->imgArr[1]，即可；

　　5、創建一個變量用來保存當前正在顯示的圖片的索引，這樣操作圖片更加簡單；

　　6、需要注意的是，如果當前顯示的圖片為最后一張時，下一張使它自動跳回第一張；同理如果當前顯示的圖片為第一張時，上一張使它自動跳回最后一張；

　　7、設置頂部的文字先要獲取對應的p標簽對象；

　　8、通過修改p標簽里面的文字就可以實現頂部文字的實時變換；

　　<!DOCTYPE html>
　　<html>
　　<head>
　　<meta charset="UTF-8">
　　<title>圖片切換練習</title>
　　<style type="text/css">
　　* {
　　margin: 0;
　　padding: 0;
　　}
　　#outer {
　　width: 500px;
　　margin: 50px auto;
　　padding: 30px;
　　background-color: aquamarine;
　　}
　　</style>
　　<script type="text/javascript">
　　window.onload = function () {
　　/**
　　* 點擊按鈕實現圖片的切換
　　*/
　　//3、獲取img標簽
　　var img = document.getElementsByTagName("img")[0];
　　//5、創建一個數組用于保存圖片的路徑
　　var imgArr = ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg"];
　　//6、創建一個變量保存當前正在顯示的圖片的索引
　　var index = 0;//默認顯示的是第一張
　　//8、獲取id為info的元素
　　var info = document.getElementById("info");
　　//9、設置提示文字
　　info.innerHTML = "一共" + imgArr.length + "張圖片， 這是第" + (index + 1) + "張";
　　//1、給上一張按鈕綁定單擊事件
　　var prev = document.getElementById("prev");
　　prev.onclick = function () {
　　//7、當索引為第一張時，那么就要將索引設置為最后一張，由于采用的是--index，所以將index設置為5
　　if (index == 0) {
　　index = 5;
　　}
　　index = index - 1;
　　//4、切換圖片，實質上就是修改img里面的src屬性
　　img.src = imgArr[index];
　　//9、設置提示文字
　　info.innerHTML = "一共" + imgArr.length + "張圖片， 這是第" + (index + 1) + "張";
　　}
　　//2、給下一張按鈕綁定單擊事件
　　var next = document.getElementById("next");
　　next.onclick = function () {
　　//7、當索引為最后一張時，那么就要將索引設置為第一張，由于采用的是++index，所以將index設置為-1
　　if (index == 4) {
　　index = -1;
　　}
　　index = index + 1;
　　//4、切換圖片，實質上就是修改img里面的src屬性
　　img.src = imgArr[index];
　　//9、設置提示文字
　　info.innerHTML = "一共" + imgArr.length + "張圖片， 這是第" + (index + 1) + "張";
　　}
　　}
　　</script>
　　</head>
　　<body>
　　<div id=outer>
　　<p id=info></p>
　　<img src="img/1.jpg" alt="冰棍"/><br/>
　　<button id="prev">上一張</button>
　　<button id="next">下一張</button>
　　</div>
　　</body>
　　</html>

　　完成后的效果：實際就是在每次點擊下一張或者上一張會實現圖片的切換，同時頂部的提示文字也會隨之發生改變。

內容已講完，更多實操各位自己動手操作吧。

GPU云服務器云服務器簡單js焦點切換代碼 js 實現視頻切換 js實現tab切換 js圖片切換

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/128214.html

編寫簡單i18n庫

摘要：因為兩次的開發維護體驗產生了對比，使我產生了不小的興趣假設一個簡單的頁面需要多語言。兩個簡單的區別就是和替換的區別。樣式模式其實就是簡單的切換。當修改的某個值時，會觸發對應的，并發射信號通知節點去更新。 i18n是什么？i18n（其來源是英文單詞internationalization的首末字符i和n，18為中間的字符數）是國際化的簡稱。前言第一次接觸多語言是用野生javascri...

txgcwm 2019-08-26 11:46 評論0 收藏0
編寫簡單i18n庫

摘要：因為兩次的開發維護體驗產生了對比，使我產生了不小的興趣假設一個簡單的頁面需要多語言。兩個簡單的區別就是和替換的區別。樣式模式其實就是簡單的切換。當修改的某個值時，會觸發對應的，并發射信號通知節點去更新。 i18n是什么？i18n（其來源是英文單詞internationalization的首末字符i和n，18為中間的字符數）是國際化的簡稱。前言第一次接觸多語言是用野生javascri...

DevWiki 2019-08-01 18:35 評論0 收藏0
Vue一個案例引發「動畫」的使用總結

摘要：既然我們知道了方法，我們就來給它加一個簡單的動畫。動畫中還給我們提供了一些鉤子函數，我們可以使用鉤子函數構建動畫。它會告知我們的動畫完成，我們綁定了為，告訴組件跳過的檢測，使用。項目開發中動畫有著很重要的作用，而且也是用到的地方非常多，例如：鼠標的進入離開，彈窗效果，組件的顯示隱藏，列表的切換等等，可以說我們網頁上的動畫無處不在，也有人說了，這些東西也可以不使用動畫。對，你說的沒錯...

liuchengxu 2019-08-23 13:43 評論0 收藏0
vue全家桶仿某魚部分布局以及功能實現

摘要：在這里簡單敘述一下我仿某魚部分布局以及功能實現的過程，僅做學習用途。另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，也完全能夠為復雜的單頁面應用提供驅動。可以進行確認收貨后刪除訂單。前言每次寫文章時，總會覺得比寫代碼難多了，可能這就是我表述方面的不足吧，然而寫文章也是可以復盤一下自己的開發過程，對自己還是受益良多的。在這里簡單敘述一下我仿某魚部分布局以及功能實現的過程，僅做...

dreamGong 2019-08-23 11:01 評論0 收藏0
回顧自己三次失敗的面試經歷

摘要：站在這個時間點上，我對自己之前三次失敗的面試經歷做了一次深度回顧。關于我第三次面試失敗的經歷，依然是與輪播圖有關。當然，這次思特奇面試之旅，最后也是以失敗告終，這也是我離進大廠最近的一次。 showImg(https://segmentfault.com/img/bVYQuP?w=528&h=513); 前言時間的齒輪已經來到了2017年的11月份，距離2018年僅僅還剩下不到兩...

DC_er 2019-08-21 17:42 評論0 收藏0