JavaScript實現(xiàn)簡單的圖片切換功能(實例代碼)
更新時間：2020年04月10日 10:37:17 作者：陳太浪
這篇文章主要介紹了JavaScript實現(xiàn)簡單的圖片切換功能，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下吧
代碼如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圖片切換</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 200px;
height: 300px;
margin: 50px auto;
padding: 20px;
background-color: skyblue;
text-align: center;
}
img{
width: 200px;
height: 200px;
margin: 20px 0;
}
</style>
<script>
// 存儲照片地址的數(shù)組
let imgArr = ["https://images.cnblogs.com/cnblogs_com/TomHe789/1693260/o_200409051704animal1.png", "https://images.cnblogs.com/cnblogs_com/TomHe789/1693260/o_200409051711animal2.png", "https://images.cnblogs.com/cnblogs_com/TomHe789/1693260/o_200409051717animal3.png", "https://images.cnblogs.com/cnblogs_com/TomHe789/1693260/o_200409051722animal4.png", "https://images.cnblogs.com/cnblogs_com/TomHe789/1693260/o_200409051726animal5.png"];
// 照片的索引
let index = 0;
window.onload = function() {
let oP = document.getElementsByTagName("p")[0];
oP.innerHTML = "一共有" + imgArr.length + "張照片,這是第" + (index+1) +"張";
let oImg = document.getElementsByTagName("img")[0];
let oPrev = document.getElementsByClassName("prev")[0];
let oNext = document.getElementsByClassName("next")[0];
// 點擊上一張響應(yīng)事件
oPrev.onclick = function () {
index--;
//實現(xiàn)照片循環(huán)
if (index < 0) {
index = imgArr.length-1;
}
oP.innerHTML = "一共有" + imgArr.length + "張照片,這是第" + (index+1) +"張";
oImg.src = imgArr[index];
};
// 點擊下一張響應(yīng)事件
oNext.onclick = function () {
index++;
//實現(xiàn)照片循環(huán)
if (index >= imgArr.length) {
index = 0;
}
oP.innerHTML = "一共有" + imgArr.length + "張照片,這是第" + (index+1) +"張";
oImg.src = imgArr[index];
};
};
</script>
</head>
<body>
<div class="box">
<p></p>
<img src="../../images/animal1.png" alt="">
<button class="prev">上一張</button>
<button class="next">下一張</button>
</div>
</body>
</html>
最終的效果
總結(jié)
到此這篇關(guān)于JavaScript實現(xiàn)簡單的圖片切換功能(實例代碼)的文章就介紹到這了,更多相關(guān)js 圖片切換內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue中實現(xiàn)深度監(jiān)聽的方法小結(jié)
在Vue中,深度監(jiān)聽是一種非常常見且重要的功能,它可以讓我們監(jiān)聽對象內(nèi)部的所有屬性,并對這些屬性的變化做出相應(yīng)的處理,在本篇博客中,我將為大家介紹Vue中如何實現(xiàn)深度監(jiān)聽的方法,需要的朋友可以參考下2024-09-09
vue獲取DOM元素并設(shè)置屬性的兩種實現(xiàn)方法
下面小編就為大家?guī)硪黄獀ue獲取DOM元素并設(shè)置屬性的兩種實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
Vue實現(xiàn)動態(tài)顯示textarea剩余字?jǐn)?shù)
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)動態(tài)顯示textarea剩余文字?jǐn)?shù)量，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
uni-app中使用ECharts配置四種不同的圖表(示例詳解)
在uni-app中集成ECharts可以為我們的應(yīng)用提供強大的圖表功能,我們詳細(xì)說一下如何在uni-app中使用ECharts,并配置四種不同的圖表,感興趣的朋友跟隨小編一起看看吧2024-01-01
vue-router?導(dǎo)航完成后獲取數(shù)據(jù)的實現(xiàn)方法
這篇文章主要介紹了vue-router?導(dǎo)航完成后獲取數(shù)據(jù),通過使用生命周期的 created() 函數(shù)，在組件創(chuàng)建完成后調(diào)用該方法，本文結(jié)合實例代碼給大家講解的非常詳細(xì)需要的朋友可以參考下2022-11-11
Vue3+vant+ts 上滑加載解決上滑調(diào)用多次數(shù)據(jù)的問題(推薦)
這篇文章主要介紹了Vue3+vant+ts 上滑加載解決上滑調(diào)用多次數(shù)據(jù)的問題,本文結(jié)合實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-12-12
這篇文章主要介紹了vue 遮罩層阻止默認(rèn)滾動事件操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
Vue框架中如何調(diào)用模擬數(shù)據(jù)你知道嗎
這篇文章主要為大家詳細(xì)介紹了Vue框架中如何調(diào)用模擬數(shù)據(jù)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
這篇文章主要給大家介紹了關(guān)于Vue動態(tài)組件和異步組件原理的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要介紹了vue+高德地圖實現(xiàn)地圖搜索及點擊定位操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09