JS實(shí)現(xiàn)圖片上下切換

更新時(shí)間：2022年07月13日 08:36:59 作者：_GotoWorld

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

本文實(shí)例為大家分享了JS實(shí)現(xiàn)圖片上下切換的具體代碼，供大家參考，具體內(nèi)容如下

源代碼：

<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>Document</title>
? ? <style type="text/css">
? ? ? ? *{
? ? ? ? ? ? margin: 0;
? ? ? ? ? ? padding: 0;
? ? ? ? }
? ? ? ? #outer{
? ? ? ? ? ? width: 130px;
? ? ? ? ? ? margin: 50px auto;
? ? ? ? ? ? padding: 10px;
? ? ? ? ? ? background-color: greenyellow;
? ? ? ? ? ? text-align: center;
? ? ? ? }
? ? </style>
? ? <script type="text/javascript">
? ? ? ? window.onload=function(){
? ? ? ? ? ? var prev=document.getElementById("prev");
? ? ? ? ? ? var next=document.getElementById("next");
? ? ? ? ? ? //切換圖片就是修改img的src屬性
? ? ? ? ? ? //獲取img標(biāo)簽
? ? ? ? ? ? var img=document.getElementsByTagName("img")[0];
? ? ? ? ? ? //創(chuàng)建數(shù)組,保存圖片路徑
? ? ? ? ? ? var imgArr=["1.png","2.png","3.png"];
? ? ? ? ? ? //創(chuàng)建變量保存當(dāng)前顯示圖片的索引
? ? ? ? ? ? var index=0;
? ? ? ? ? ? //設(shè)置提示文字
? ? ? ? ? ? var info=document.getElementById("info");
? ? ? ? ? ? info.innerHTML="一共"+imgArr.length+"張圖片,當(dāng)前第"+(index+1)+"張";
? ? ? ? ? ? prev.onclick=function(){
? ? ? ? ? ? ? ? index--;
? ? ? ? ? ? ? ? //判斷index是否小于0
? ? ? ? ? ? ? ? if (index<0){
? ? ? ? ? ? ? ? ? ? index=imgArr.length-1;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? img.src=imgArr[index];
? ? ? ? ? ? ? ? info.innerHTML="一共"+imgArr.length+"張圖片,當(dāng)前第"+(index+1)+"張";
?
? ? ? ? ? ? };
? ? ? ? ? ? next.onclick=function(){
? ? ? ? ? ? ? ? index++;
? ? ? ? ? ? ? ? if(index>imgArr.length-1){
? ? ? ? ? ? ? ? ? ? index=0;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? img.src=imgArr[index];
? ? ? ? ? ? ? ? info.innerHTML="一共"+imgArr.length+"張圖片,當(dāng)前第"+(index+1)+"張";
? ? ? ? ? ? };
? ? ? ? };
? ? </script>
?
</head>
<body>
? ? <div id="outer">
? ? ? ? <p id="info"></p>
? ? ? ? <img src="1.png" alt="1">
? ? ? ? <button id="prev">上一張</button>
? ? ? ? <button id="next">下一張</button>
? ? </div>
</body>
</html>

效果如下圖

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

您可能感興趣的文章:

相關(guān)文章

uniapp獲取手機(jī)通知權(quán)限實(shí)現(xiàn)demo
這篇文章主要為大家介紹了uniapp獲取手機(jī)通知權(quán)限實(shí)現(xiàn)demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-07-07
JavaScript實(shí)現(xiàn)外溢動(dòng)態(tài)愛(ài)心的效果的示例代碼
這篇文章主要為大家介紹了如何利用JavaScript制作出簡(jiǎn)單的外溢動(dòng)態(tài)愛(ài)心的效果，文中的示例代碼講解詳細(xì)，感興趣的小伙伴快跟隨小編一起動(dòng)手試一試
2022-03-03
JavaScript使用ZeroClipboard操作剪切板
這篇文章主要為大家詳細(xì)介紹了JavaScript使用ZeroClipboard操作剪切板的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-05-05
js時(shí)間比較 js計(jì)算時(shí)間差的簡(jiǎn)單實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇js時(shí)間比較 js計(jì)算時(shí)間差的簡(jiǎn)單實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-08-08
Javascript前端事件循環(huán)機(jī)制詳細(xì)講解
單線程的同步等待極大影響效率，任務(wù)不得不一個(gè)一個(gè)等待執(zhí)行，對(duì)于網(wǎng)頁(yè)應(yīng)用是無(wú)法接受的。所以Javascript使用事件循環(huán)機(jī)制來(lái)解決異步任務(wù)的問(wèn)題。本文就來(lái)講講Javascript的事件循環(huán)機(jī)制，希望對(duì)你有所幫助
2022-12-12
js如何判斷對(duì)象數(shù)組中是否存在某個(gè)對(duì)象
這篇文章主要介紹了js如何判斷對(duì)象數(shù)組中是否存在某個(gè)對(duì)象問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04
微信小程序掃描普通二維碼跳轉(zhuǎn)到小程序指定頁(yè)面操作方法
這篇文章主要給大家介紹了關(guān)于微信小程序掃描普通二維碼跳轉(zhuǎn)到小程序指定頁(yè)面操作的相關(guān)資料,為了分享方便,或者制作宣傳海報(bào)之類的,經(jīng)常需要用到微信小程序指定頁(yè)面的二維碼,讓用戶掃碼直達(dá)頁(yè)面,需要的朋友可以參考下
2023-08-08
JavaScript實(shí)現(xiàn)自定義媒體播放器方法介紹
本文主要介紹了JavaScript自定義媒體播放器的實(shí)現(xiàn)過(guò)程與方法，具有一定的參考作用，下面跟著小編一起來(lái)看下吧
2017-01-01
JavaScript中獲取高度和寬度函數(shù)總結(jié)
這篇文章主要介紹了JavaScript中獲取高度和寬度函數(shù)總結(jié),例如獲取視窗大小、可見(jiàn)區(qū)域?qū)?、可?jiàn)區(qū)域高、獲取元素自身大小等,很方便的一個(gè)總結(jié),需要的朋友可以參考下
2014-10-10
js實(shí)現(xiàn)電子時(shí)鐘功能
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)電子時(shí)鐘功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-06-06