JS實現(xiàn)圖片上下切換
更新時間：2022年07月13日 08:36:59 作者：_GotoWorld
這篇文章主要為大家詳細介紹了JS實現(xiàn)圖片上下切換，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了JS實現(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標簽
? ? ? ? ? ? var img=document.getElementsByTagName("img")[0];
? ? ? ? ? ? //創(chuàng)建數(shù)組,保存圖片路徑
? ? ? ? ? ? var imgArr=["1.png","2.png","3.png"];
? ? ? ? ? ? //創(chuàng)建變量保存當前顯示圖片的索引
? ? ? ? ? ? var index=0;
? ? ? ? ? ? //設置提示文字
? ? ? ? ? ? var info=document.getElementById("info");
? ? ? ? ? ? info.innerHTML="一共"+imgArr.length+"張圖片,當前第"+(index+1)+"張";
? ? ? ? ? ? prev.onclick=function(){
? ? ? ? ? ? ? ? index--;
? ? ? ? ? ? ? ? //判斷index是否小于0
? ? ? ? ? ? ? ? if (index<0){
? ? ? ? ? ? ? ? ? ? index=imgArr.length-1;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? img.src=imgArr[index];
? ? ? ? ? ? ? ? info.innerHTML="一共"+imgArr.length+"張圖片,當前第"+(index+1)+"張";
?
? ? ? ? ? ? };
? ? ? ? ? ? next.onclick=function(){
? ? ? ? ? ? ? ? index++;
? ? ? ? ? ? ? ? if(index>imgArr.length-1){
? ? ? ? ? ? ? ? ? ? index=0;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? img.src=imgArr[index];
? ? ? ? ? ? ? ? info.innerHTML="一共"+imgArr.length+"張圖片,當前第"+(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>效果如下圖
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
uniapp獲取手機通知權(quán)限實現(xiàn)demo
這篇文章主要為大家介紹了uniapp獲取手機通知權(quán)限實現(xiàn)demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07
JavaScript實現(xiàn)外溢動態(tài)愛心的效果的示例代碼
這篇文章主要為大家介紹了如何利用JavaScript制作出簡單的外溢動態(tài)愛心的效果，文中的示例代碼講解詳細，感興趣的小伙伴快跟隨小編一起動手試一試2022-03-03
JavaScript使用ZeroClipboard操作剪切板
這篇文章主要為大家詳細介紹了JavaScript使用ZeroClipboard操作剪切板的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
下面小編就為大家?guī)硪黄猨s時間比較 js計算時間差的簡單實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
單線程的同步等待極大影響效率，任務不得不一個一個等待執(zhí)行，對于網(wǎng)頁應用是無法接受的。所以Javascript使用事件循環(huán)機制來解決異步任務的問題。本文就來講講Javascript的事件循環(huán)機制，希望對你有所幫助2022-12-12
這篇文章主要介紹了js如何判斷對象數(shù)組中是否存在某個對象問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
微信小程序掃描普通二維碼跳轉(zhuǎn)到小程序指定頁面操作方法
這篇文章主要給大家介紹了關(guān)于微信小程序掃描普通二維碼跳轉(zhuǎn)到小程序指定頁面操作的相關(guān)資料,為了分享方便,或者制作宣傳海報之類的,經(jīng)常需要用到微信小程序指定頁面的二維碼,讓用戶掃碼直達頁面,需要的朋友可以參考下2023-08-08
JavaScript實現(xiàn)自定義媒體播放器方法介紹
本文主要介紹了JavaScript自定義媒體播放器的實現(xiàn)過程與方法，具有一定的參考作用，下面跟著小編一起來看下吧2017-01-01
JavaScript中獲取高度和寬度函數(shù)總結(jié)
這篇文章主要介紹了JavaScript中獲取高度和寬度函數(shù)總結(jié),例如獲取視窗大小、可見區(qū)域?qū)挕⒖梢妳^(qū)域高、獲取元素自身大小等,很方便的一個總結(jié),需要的朋友可以參考下2014-10-10
這篇文章主要為大家詳細介紹了js實現(xiàn)電子時鐘功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06