javascript實現(xiàn)點擊圖片切換
更新時間：2021年04月05日 14:54:41 作者：�Lzyo�
這篇文章主要介紹了javascript實現(xiàn)點擊圖片切換，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
點擊實現(xiàn)圖片切換效果在生活中非常的常見，恰巧今天的練習也是做一個圖片的切換效果。供大家參考：
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 部分：
//找標簽
let myImg = document.getElementById("myImg");
let pre=document.getElementById("pre");
let next=document.getElementById("next");
//創(chuàng)建一個保存圖片的數(shù)組
let arrImg = ["images/1.jpg", "images/1-1.png", "images/3.jpg" ];
//數(shù)組的索引下標
let index=0;
//定義事件函數(shù)
function preImg(event){
index--;
//實現(xiàn)循環(huán)切換
if (index<0)
{
index=arrImg.length-1;
}
myImg.src = arrImg[index];
}
function nextImg(event){
index++;
//實現(xiàn)循環(huán)切換
if (index>arrImg.length-1)
{
index=0;
}
myImg.src = arrImg[index];
}
pre.addEventListener('click',preImg);
next.addEventListener('click',nextImg);
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
詳解JavaScript中new操作符的解析和實現(xiàn)
這篇文章主要介紹了JavaScript中new操作符的解析和實現(xiàn)，幫助大家更好的理解和學習JavaScript，感興趣的朋友可以了解下2020-09-09
這篇文章主要介紹了js如何獲取checkbox復選框選中的選項,比較適合新手，需要的朋友可以參考下2014-08-08
這篇文章主要為大家詳細介紹了js實現(xiàn)點擊切換和自動播放的輪播圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
本文給大家分享使用for循環(huán)實現(xiàn)js生成簡單的等差數(shù)列，具體實現(xiàn)方法，大家參考下本文2017-11-11
這篇文章主要介紹了微信小程序日歷插件代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-12-12
JavaScript解析JSON格式數(shù)據(jù)的方法示例
這篇文章主要介紹了JavaScript解析JSON格式數(shù)據(jù)的方法,結(jié)合實例形式分析了JavaScript解析json格式數(shù)據(jù)的常用函數(shù)與使用技巧,需要的朋友可以參考下2017-01-01
這篇文章主要為大家詳細介紹了微信小程序三級聯(lián)動選擇器使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-02-02
循環(huán)允許我們通過循環(huán)數(shù)組或?qū)ο笾械捻棽⒆鲆恍┦虑椤Ｔ谶@篇文章中，我們將了解JavaScript提供的for循環(huán)，感興趣的小伙伴可以了解一下2022-11-11
Bootstrap編寫一個在當前網(wǎng)頁彈出可關(guān)閉的對話框 非彈窗
這篇文章主要介紹了Bootstrap編寫一個在當前網(wǎng)頁彈出可關(guān)閉的對話框，不用跳轉(zhuǎn)，非彈窗，感興趣的小伙伴們可以參考一下2016-06-06
這篇文章主要介紹了javascript無刷新評論實現(xiàn)方法,涉及javascript動態(tài)添加表格元素的技巧,需要的朋友可以參考下2015-05-05