使用JS實現簡單的圖片切換功能

3403771864 發布于2022-09-23 22:20 / 426人閱讀

　　我們今天就說說用JS實現圖片的切換,效果如圖：

　　分析：要實現切換，先有一個按鈕添加點擊響應時間，可以用構造函數。切換圖片實現動作可以用切換img標簽src的屬性，可以獲取標簽屬性然后進行修改即可。就要把屬性值存放在一個數組中，通過數組的索引來獲取。

　　附上相關代碼：

　　css部分代碼：

　　<style type="text/css">
　　*{
　　margin: 0;
　　padding: 0;
　　}
　　#a{
　　margin: 50px auto;
　　width: 500px;
　　padding: 15px;
　　text-align: center;
　　background-color: #99FF99;
　　}
　　</style>

　　js代碼：

　　<script>
　　window.onload=function(){
　　var btn1 = document.getElementById("btn1");
　　var btn2 = document.getElementById("btn2");
　　var img = document.getElementsByTagName("img")[0];
　　//構建一個數組存圖片
　　var imgArr = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"]
　　var index = 0;
　　//console.log(src);
　　var p = document.getElementById("b");
　　btn1.onclick = function(){
　　//alert("1");
　　//img.src="img/2.jpg"
　　index--;
　　if (index<0){
　　index = imgArr.length-1
　　}
　　img.src=imgArr[index]
　　p.innerHTML = "共"+ imgArr.length+"張圖片，當前第"+(index+1)+"張"
　　};
　　btn2.onclick = function(){
　　//alert("2");
　　index++;
　　if (index>4){
　　index = 0;
　　}
　　img.src=imgArr[index]
　　p.innerHTML = "共"+imgArr.length+"張圖片，當前第"+(index+1)+"張"
　　};
　　};
　　</script>

　　body部分：

　　<body>
　　<div id="a">
　　<img src="img/1.jpg" alt="雪糕" />
　　<button id="btn1">上一張</button>
　　<button id="btn2">下一張</button>
　　<p id="b">共5張圖片，當前第1張</p>
　　</div>
　　</body>

　　以上就是全部內容，讓大家學到更多相關內容。

云服務器 GPU云服務器 js實現的簡單特效簡單的上傳圖片js python實現簡單爬蟲功能簡單js焦點切換代碼

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

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

JS基礎入門篇（二）—if ，字符串拼接，數組，圖片循環切換

摘要：錯誤，因為取到的是字符串，相加會造成字符串拼接。強制轉換，將字符串類型轉成數字類型。以上代碼結果為解釋和獲取到的是字符串，當字符串相加時，會直接拼接字符串。表示數組的線長度。重新定義數組長度，后面個數組的值都為圖片切換兩張圖片切換。 1.if篇 1. if 語法: if( 判斷條件 ){ 代碼塊 } 以上代碼的功能是：如果判斷...

betacat 2019-08-22 17:13 評論0 收藏0
JS基礎入門篇（二）—if ，字符串拼接，數組，圖片循環切換

摘要：錯誤，因為取到的是字符串，相加會造成字符串拼接。強制轉換，將字符串類型轉成數字類型。以上代碼結果為解釋和獲取到的是字符串，當字符串相加時，會直接拼接字符串。表示數組的線長度。重新定義數組長度，后面個數組的值都為圖片切換兩張圖片切換。 1.if篇 1. if 語法: if( 判斷條件 ){ 代碼塊 } 以上代碼的功能是：如果判斷...

yhaolpz 2019-08-29 15:23 評論0 收藏0
JS基礎入門篇（二）—if ，字符串拼接，數組，圖片循環切換

摘要：錯誤，因為取到的是字符串，相加會造成字符串拼接。強制轉換，將字符串類型轉成數字類型。以上代碼結果為解釋和獲取到的是字符串，當字符串相加時，會直接拼接字符串。表示數組的線長度。重新定義數組長度，后面個數組的值都為圖片切換兩張圖片切換。 1.if篇 1. if 語法: if( 判斷條件 ){ 代碼塊 } 以上代碼的功能是：如果判斷...

MudOnTire 2019-08-02 10:26 評論0 收藏0
實現簡單的輪播圖

摘要：小練習輪播圖組件任務描述在和上一任務同一目錄下面創建一個文件，在目錄中創建，并在其中編碼，實現一個輪播圖的功能。實現思路考察對節點，定時器，事件的處理。小練習3：輪播圖組件任務描述在和上一任務同一目錄下面創建一個task0002_3.html文件，在js目錄中創建task0002_3.js，并在其中編碼，實現一個輪播圖的功能。圖片數量及URL均在HTML中寫好可以配置輪播的順...

EsgynChina 2019-08-22 10:39 評論0 收藏0