js實現(xiàn)圖片數(shù)組中圖片切換效果
更新時間：2022年07月21日 11:37:47 作者：藍(lán)胖胖。
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)圖片數(shù)組中圖片切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
寫一個圖片切換的小案例，鞏固一下setAttribute的用法。setAttribute()方法能夠給dom元素添加屬性并指定屬性值，如果屬性已經(jīng)存在則更改屬性值。
方法：將圖片放入數(shù)組中首先給img一個初始值，使用index存放當(dāng)前被點擊圖片的下標(biāo)，當(dāng)再一次點擊時，下標(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>實現(xiàn)效果為當(dāng)點擊下一張圖片切換至數(shù)組中的下一張，點擊上一張切換至數(shù)組中的下一張
初始界面為
點擊下一張效果為
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于ES6的異步終極解決方案，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用ES6具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
這篇文章主要介紹了JavaScript中的Proxy-Reflect操作方法,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-11-11
js window.onload 加載多個函數(shù)和追加函數(shù)詳解
本篇文章主要是對js window.onload 加載多個函數(shù)和追加函數(shù)進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
這篇文章主要介紹了JS如何實現(xiàn)距離上次刷新已過多少秒,需要的朋友可以參考下2014-05-05
這篇文章主要介紹了京東優(yōu)選小程序的實現(xiàn)代碼示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
JS大坑之19位數(shù)的Number型精度丟失問題詳解
這篇文章主要介紹了JS大坑之19位數(shù)的Number型精度丟失問題，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
ES6中export?default和export之間的區(qū)別詳解
export和export?default都是es6語法中用來導(dǎo)出組件的,可以導(dǎo)出的文檔類型有(?數(shù)據(jù)、常量、函數(shù)、js文件、模塊等),下面這篇文章主要給大家介紹了關(guān)于ES6中export?default和export之間的區(qū)別的相關(guān)資料,需要的朋友可以參考下2023-04-04
jquery的寫法從事web開發(fā)的人員應(yīng)該不會陌生吧，下面我們要說的是使用js模仿jquery寫法的實現(xiàn)代碼，感興趣的朋友可以參考下哈，希望對大家有所幫助2013-06-06
URL對于開發(fā)人員來講，應(yīng)該是非常熟悉的東西了吧。這篇文章主要為大家詳細(xì)介紹了JavaScript中更安全的URL讀寫方法，希望對大家有所幫助2023-02-02
微信小程序scroll-view組件實現(xiàn)滾動動畫
這篇文章主要為大家詳細(xì)介紹了微信小程序scroll-view組件實現(xiàn)滾動動畫，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-01-01