JavaScript onclick點選事件-點選切換圖片且自動播放
阿新 • • 發佈：2022-01-13
在頁面中放圖片並設定四個button，可以通過點選上一張下一張來切換圖片（翻到最後一張自動切換到第一張）.使用者點選自動播放，每隔兩秒自動切換（類似輪播圖），點選停止播放，就終止播放，運用了定時器。先看效果圖.
下面是完整的程式碼：
<body>
<img id="img" src="./img/0.webp" alt=" onclick點選事件-點選切換圖片且自動播放"><br>
//給四個button加上點選事件
<button type="button" onclick="changeImg1()">上一張</button>
<button type="button" onclick="changeImg()">下一張</button>
<button type="button" onclick="autoplay1()">自動播放</button>
<button type="button" onclick="stop1()">停止播放</button>
<script>
//獲取這個img
var img = document.getElementById("img");
//設定一個變數，負責切換圖片，作為索引值
var index = 0;
//設定一個變數來儲存定時器的返回值
var t = null;
//定義一個數組來儲存照片的地址
var imgPath = ["./img/0.webp","./img/1.webp","./img/2.webp","./img/3.webp","./img/4.webp","./img/5.webp","./img/6.webp","./img/7.webp","./img/8.webp"]
//下一張
function changeImg() {
//我們用三目運算子
index = index>=(imgPath.length-1)?0:++index;
img.src = imgPath[in
效果圖就是上面的啦：
到此這篇關於Script onclick點選事件-點選切換圖片且自動播放的文章就介紹到這了,更多相關JavaScript onclick點選事件 內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！