欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

javascript實(shí)現(xiàn)點(diǎn)擊圖片切換

 更新時(shí)間：2021年04月05日 14:54:41   作者：�Lzyo�  
這篇文章主要介紹了javascript實(shí)現(xiàn)點(diǎn)擊圖片切換，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

點(diǎn)擊實(shí)現(xiàn)圖片切換效果在生活中非常的常見，恰巧今天的練習(xí)也是做一個(gè)圖片的切換效果。供大家參考：

HTML代碼如下：

<div class="img">
 <img src="images/1.jpg" id="myImg" class="myImg" alt="這里是1.jpg">
 <p>
 <input type="button" id="pre" class="btn" value="上一張">
 <input type="button" id="next" class="btn" value="下一張">
 </p> 
</div>

CSS代碼如下：

*{
 margin: 0;
 padding: 0;
}
img{
 boder:none;
}
button{
 outline: none;
 vertical-align: middle;
}
.img{
 width: 100%;
 margin-left: auto;
 margin-right: auto;
 margin-top: 20px;
 text-align: center;
}
.myImg{
 width: 500px;
 height: 300px;
}
p{
 text-align: center;
}
p .btn{
 width: 100px;
 height: 30px;
 background: #306bbf;
 color: #fff;
 margin-top: 20px;
 margin-bottom: 20px;
}

javascript 部分：

//找標(biāo)簽
let myImg = document.getElementById("myImg");
let pre=document.getElementById("pre");
let next=document.getElementById("next");

//創(chuàng)建一個(gè)保存圖片的數(shù)組
let arrImg = ["images/1.jpg", "images/1-1.png", "images/3.jpg" ];
//數(shù)組的索引下標(biāo)
let index=0;
//定義事件函數(shù)
function preImg(event){
 index--;
 //實(shí)現(xiàn)循環(huán)切換
 if (index<0)
 {
 index=arrImg.length-1;
 }
 myImg.src = arrImg[index];
}
function nextImg(event){
 index++;
 //實(shí)現(xiàn)循環(huán)切換
 if (index>arrImg.length-1)
 {
 index=0;
 }
 myImg.src = arrImg[index];
}

pre.addEventListener('click',preImg);
next.addEventListener('click',nextImg);

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論