js實(shí)現(xiàn)圖片數(shù)組中圖片切換效果

更新時(shí)間：2022年07月21日 11:37:47 作者：藍(lán)胖胖。

這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)圖片數(shù)組中圖片切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

寫(xiě)一個(gè)圖片切換的小案例，鞏固一下setAttribute的用法。setAttribute()方法能夠給dom元素添加屬性并指定屬性值，如果屬性已經(jīng)存在則更改屬性值。

方法：將圖片放入數(shù)組中首先給img一個(gè)初始值，使用index存放當(dāng)前被點(diǎn)擊圖片的下標(biāo)，當(dāng)再一次點(diǎn)擊時(shí)，下標(biāo)+1賦值給數(shù)組下標(biāo)，利用setAttribute()方法給img標(biāo)簽設(shè)置src屬性。上一張效果反之，代碼如下。

<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="utf-8">
?? ??? ?<title></title>
?? ?</head>
?? ?<style type="text/css">
?? ??? ?img {
?? ??? ??? ?width: 400px;
?? ??? ??? ?height: 400px;
?? ??? ??? ?display: block;
?? ??? ?}
?? ?</style>
?? ?<body>
?? ??? ?<img src="../imgs/t11.jpg" alt="" id="img">
?? ??? ?<button type="button" id="prev">上一張</button>
?? ??? ?<button type="button" id="next">下一張</button>
?? ?</body>
?? ?<script type="text/javascript">
?? ??? ?var imgs = document.getElementById("img")
?? ??? ?var nextBtn = document.getElementById("next")
?? ??? ?var prevBtn = document.getElementById("prev")


?? ??? ?var imgArr = [
?? ??? ??? ?"../imgs/t11.jpg",
?? ??? ??? ?"../imgs/doraemon.jpg",
?? ??? ??? ?"../imgs/peiqi.jpg",
?? ??? ??? ?"../imgs/qiang.jpg"
?? ??? ?]
?? ??? ?var index = 0;

?? ??? ?nextBtn.onclick = function() {
?? ??? ??? ?index++;

?? ??? ??? ?if (index > imgArr.length - 1) {

?? ??? ??? ??? ?index = 0
?? ??? ??? ?}
?? ??? ??? ?imgs.setAttribute("src", imgArr[index])

?? ??? ?}

?? ??? ?prevBtn.onclick = function() {
?? ??? ??? ?index--
?? ??? ??? ?if (index < 0) {
?? ??? ??? ??? ?index = imgArr.length - 1
?? ??? ??? ?}
?? ??? ??? ?imgs.setAttribute("src", imgArr[index])
?? ??? ?}
?? ?</script>
</html>

實(shí)現(xiàn)效果為當(dāng)點(diǎn)擊下一張圖片切換至數(shù)組中的下一張，點(diǎn)擊上一張切換至數(shù)組中的下一張

初始界面為

點(diǎn)擊下一張效果為

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

您可能感興趣的文章:

相關(guān)文章

ES6的異步終極解決方案分享
這篇文章主要給大家介紹了關(guān)于ES6的異步終極解決方案，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用ES6具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-07-07
JavaScript中的Proxy-Reflect操作方法
這篇文章主要介紹了JavaScript中的Proxy-Reflect操作方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
2023-11-11
js window.onload 加載多個(gè)函數(shù)和追加函數(shù)詳解
本篇文章主要是對(duì)js window.onload 加載多個(gè)函數(shù)和追加函數(shù)進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2014-01-01
JS實(shí)現(xiàn)距離上次刷新已過(guò)多少秒示例
這篇文章主要介紹了JS如何實(shí)現(xiàn)距離上次刷新已過(guò)多少秒,需要的朋友可以參考下
2014-05-05
京東優(yōu)選小程序的實(shí)現(xiàn)代碼示例
這篇文章主要介紹了京東優(yōu)選小程序的實(shí)現(xiàn)代碼示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-02-02
JS大坑之19位數(shù)的Number型精度丟失問(wèn)題詳解
這篇文章主要介紹了JS大坑之19位數(shù)的Number型精度丟失問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
ES6中export?default和export之間的區(qū)別詳解
export和export?default都是es6語(yǔ)法中用來(lái)導(dǎo)出組件的,可以導(dǎo)出的文檔類(lèi)型有(?數(shù)據(jù)、常量、函數(shù)、js文件、模塊等),下面這篇文章主要給大家介紹了關(guān)于ES6中export?default和export之間的區(qū)別的相關(guān)資料,需要的朋友可以參考下
2023-04-04
js模仿jquery的寫(xiě)法示例代碼
jquery的寫(xiě)法從事web開(kāi)發(fā)的人員應(yīng)該不會(huì)陌生吧，下面我們要說(shuō)的是使用js模仿jquery寫(xiě)法的實(shí)現(xiàn)代碼，感興趣的朋友可以參考下哈，希望對(duì)大家有所幫助
2013-06-06
JavaScript中更安全的URL讀寫(xiě)方法總結(jié)
URL對(duì)于開(kāi)發(fā)人員來(lái)講，應(yīng)該是非常熟悉的東西了吧。這篇文章主要為大家詳細(xì)介紹了JavaScript中更安全的URL讀寫(xiě)方法，希望對(duì)大家有所幫助
2023-02-02
微信小程序scroll-view組件實(shí)現(xiàn)滾動(dòng)動(dòng)畫(huà)
這篇文章主要為大家詳細(xì)介紹了微信小程序scroll-view組件實(shí)現(xiàn)滾動(dòng)動(dòng)畫(huà)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-01-01