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);
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
原生javascript實(shí)現(xiàn)的ajax異步封裝功能示例
這篇文章主要介紹了原生javascript實(shí)現(xiàn)的ajax異步封裝功能,結(jié)合完整實(shí)例形式分析了原生javascript實(shí)現(xiàn)的ajax異步交互函數(shù)與相應(yīng)的使用方法,需要的朋友可以參考下2016-11-11
這篇文章主要介紹了JavaScript寄生組合式繼承,結(jié)合實(shí)例形式分析了javascript寄生組合式繼承的原理、定義與簡單使用方法,需要的朋友可以參考下2019-01-01
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)上傳圖片功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-05-05
JavaScript實(shí)現(xiàn)的一個(gè)倒計(jì)時(shí)的類
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的一個(gè)倒計(jì)時(shí)的類,本文直接給出demo代碼,需要的朋友可以參考下2015-03-03
JavaScript 自定義彈出窗口的實(shí)現(xiàn)代碼
這篇文章主要介紹了JavaScript 自定義彈出窗口的實(shí)現(xiàn)代碼,實(shí)現(xiàn)一采用html編寫彈出窗口內(nèi)容,實(shí)現(xiàn)二采用JavaScript編寫彈出窗口內(nèi)容,結(jié)合示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-09-09
自用js開發(fā)框架小成 學(xué)習(xí)js的朋友可以看看
前段時(shí)間項(xiàng)目需要用到j(luò)s樹，找了好多都不符合項(xiàng)目需求，后來發(fā)現(xiàn)了梅花雪樹和js框架，類似C#名稱空間的用法讓我眼前一亮，遂拿來主義，讀了幾遍代碼后就開工了（我是個(gè)急性子呵呵），完成了大部分，最近才找出來測試了下。2010-11-11
移動(dòng)端觸摸滑動(dòng)插件swiper使用方法詳解
這篇文章主要為大家詳細(xì)介紹了移動(dòng)端觸摸滑動(dòng)插件swiper的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
bootstrap開發(fā)標(biāo)簽頁時(shí)，標(biāo)簽頁顯示正常，但點(diǎn)擊時(shí)候?qū)?yīng)內(nèi)容區(qū)域沒有變化。接下來通過本文給大家分享BootStrap 頁簽切換失效的解決方法，感興趣的朋友一起看看吧2017-08-08
本節(jié)主要介紹了JS判斷變量是否為空是否null的方法,需要的朋友可以參考下2014-07-07
JavaScript實(shí)現(xiàn)Excel表格效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)Excel表格效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-02-02