資訊專(zhuān)欄INFORMATION COLUMN
我們今天就說(shuō)說(shuō)用JS實(shí)現(xiàn)圖片的切換,效果如圖：
分析：要實(shí)現(xiàn)切換，先有一個(gè)按鈕添加點(diǎn)擊響應(yīng)時(shí)間，可以用構(gòu)造函數(shù)。切換圖片實(shí)現(xiàn)動(dòng)作可以用切換img標(biāo)簽src的屬性，可以獲取標(biāo)簽屬性然后進(jìn)行修改即可。就要把屬性值存放在一個(gè)數(shù)組中，通過(guò)數(shù)組的索引來(lái)獲取。
附上相關(guān)代碼：
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];
//構(gòu)建一個(gè)數(shù)組存圖片
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+"張圖片，當(dāng)前第"+(index+1)+"張"
};
btn2.onclick = function(){
//alert("2");
index++;
if (index>4){
index = 0;
}
img.src=imgArr[index]
p.innerHTML = "共"+imgArr.length+"張圖片，當(dāng)前第"+(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張圖片，當(dāng)前第1張</p> </div> </body>
以上就是全部?jī)?nèi)容，讓大家學(xué)到更多相關(guān)內(nèi)容。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/127826.html
摘要：錯(cuò)誤，因?yàn)槿〉降氖亲址?，相加?huì)造成字符串拼接。強(qiáng)制轉(zhuǎn)換，將字符串類(lèi)型轉(zhuǎn)成數(shù)字類(lèi)型。以上代碼結(jié)果為解釋和獲取到的是字符串，當(dāng)字符串相加時(shí)，會(huì)直接拼接字符串。表示數(shù)組的線長(zhǎng)度。重新定義數(shù)組長(zhǎng)度，后面?zhèn)€數(shù)組的值都為圖片切換兩張圖片切換。 1.if篇 1. if 語(yǔ)法: if( 判斷條件 ){ 代碼塊 } 以上代碼的功能是： 如果 判斷...
摘要：錯(cuò)誤，因?yàn)槿〉降氖亲址?，相加?huì)造成字符串拼接。強(qiáng)制轉(zhuǎn)換，將字符串類(lèi)型轉(zhuǎn)成數(shù)字類(lèi)型。以上代碼結(jié)果為解釋和獲取到的是字符串，當(dāng)字符串相加時(shí)，會(huì)直接拼接字符串。表示數(shù)組的線長(zhǎng)度。重新定義數(shù)組長(zhǎng)度，后面?zhèn)€數(shù)組的值都為圖片切換兩張圖片切換。 1.if篇 1. if 語(yǔ)法: if( 判斷條件 ){ 代碼塊 } 以上代碼的功能是： 如果 判斷...
摘要：錯(cuò)誤，因?yàn)槿〉降氖亲址?，相加?huì)造成字符串拼接。強(qiáng)制轉(zhuǎn)換，將字符串類(lèi)型轉(zhuǎn)成數(shù)字類(lèi)型。以上代碼結(jié)果為解釋和獲取到的是字符串，當(dāng)字符串相加時(shí)，會(huì)直接拼接字符串。表示數(shù)組的線長(zhǎng)度。重新定義數(shù)組長(zhǎng)度，后面?zhèn)€數(shù)組的值都為圖片切換兩張圖片切換。 1.if篇 1. if 語(yǔ)法: if( 判斷條件 ){ 代碼塊 } 以上代碼的功能是： 如果 判斷...
摘要：小練習(xí)輪播圖組件任務(wù)描述在和上一任務(wù)同一目錄下面創(chuàng)建一個(gè)文件，在目錄中創(chuàng)建，并在其中編碼，實(shí)現(xiàn)一個(gè)輪播圖的功能。實(shí)現(xiàn)思路考察對(duì)節(jié)點(diǎn)，定時(shí)器，事件的處理。 小練習(xí)3：輪播圖組件 任務(wù)描述在和上一任務(wù)同一目錄下面創(chuàng)建一個(gè)task0002_3.html文件，在js目錄中創(chuàng)建task0002_3.js，并在其中編碼，實(shí)現(xiàn)一個(gè)輪播圖的功能。 圖片數(shù)量及URL均在HTML中寫(xiě)好 可以配置輪播的順...
閱讀 570·2023-03-27 18:33
閱讀 761·2023-03-26 17:27
閱讀 658·2023-03-26 17:14
閱讀 612·2023-03-17 21:13
閱讀 546·2023-03-17 08:28
閱讀 1836·2023-02-27 22:32
閱讀 1330·2023-02-27 22:27
閱讀 2212·2023-01-20 08:28
