JS實現圖片上下切換具體代碼

3403771864 發布于2022-10-16 17:28 / 457人閱讀

　　本文講述就是JS實現圖片上下切換的具體代碼，看看具體代碼：

　　源代碼：

　　<!DOCTYPE html>

　　<html>

　　<head>

　　<title>Document</title>

　　margin: 0;

　　padding: 0;

　　}

　　#outer{

　　width: 130px;

　　margin: 50px auto;

　　padding: 10px;

　　background-color: greenyellow;

　　text-align: center;

　　}

　　</style>

　　window.onload=function(){

　　var prev=document.getElementById("prev");

　　var next=document.getElementById("next");

　　//切換圖片就是修改img的src屬性

　　//獲取img標簽

　　var img=document.getElementsByTagName("img")[0];

　　//創建數組,保存圖片路徑

　　var imgArr=["1.png","2.png","3.png"];

　　//創建變量保存當前顯示圖片的索引

　　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>

　　</body>

　　</html>

　　效果如下圖

　　上述內容全部講述完畢，歡迎大家關注更多后續。

云服務器 GPU云服務器 js代碼圖片自動切換 js實現上下鍵選擇 asp圖片切換代碼 js 實現視頻切換

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/128016.html

用Vue.js實現點擊左右按鈕圖片切換代碼演示

　　本篇文章就是講述Vue.js實現點擊左右按鈕圖片切換的具體代碼，具體內容如下：　　從多種角度實現展示給大家。　　效果：　　html　　通過v-for循環展示圖片列表itemlist，將圖片路徑保存在data中的itemlist中，添加上下按鈕的點擊事件。　　<template> 　　<div> 　　<divclass="zs-adv"> ...

3403771864 2022-10-26 22:15 評論0 收藏0
談談常見H5制作方法——視頻與CSS3

摘要：但目前白名單申請途徑已經關閉。目前在安卓有一種同層播放器的解決方案。可解決安卓機自動全屏以及視頻播放完畢會跳出廣告的問題，并且可以實現交互。本文在H5動效的常見制作手法的基礎上，對相印的H5動效制作手法進行了擴展和整理，并結合案例談談怎么將其做得生動。視頻類 1、體驗案例視頻類h5可以帶給用戶動效逼真，流暢的體驗。雖然說制作視頻的難度較大，但是瑕不掩瑜，一支視頻可以盡可能地創造出...

tracy 2019-06-21 16:14 評論0 收藏0
用typescript開發手勢庫 - (1)web開發常用手勢有哪些?

這只是個開頭說在最前面,本文是一個系列文章的開頭, 這個系列里我會講如何用typescript開發一款支持pc和手機端的手勢庫any-touch, 以及通過jest讓你的代碼測試覆蓋率100%. showImg(https://segmentfault.com/img/bVbp3B0?w=936&h=246); 目錄用TypeScript開發手勢庫 - (2)tsconfig.json & r...

raise_yang 2019-08-23 16:03 評論0 收藏0