快捷導(dǎo)航

JavaScript?onclick點擊事件-點擊切換圖片且自動播放

更新時間：2022年01月26日 11:01:59 作者：土豆切成絲

這篇文章主要介紹了JavaScript?onclick點擊事件-點擊切換圖片且自動播放，在頁面中放圖片并設(shè)置四個button，可以通過點擊上一張下一張來切換圖片，下面來看看具體的實現(xiàn)過程吧

在頁面中放圖片并設(shè)置四個button，可以通過點擊上一張下一張來切換圖片（翻到最后一張自動切換到第一張）.用戶點擊自動播放，每隔兩秒自動切換（類似輪播圖），點擊停止播放，就終止播放，運用了定時器。先看效果圖.

下面是完整的代碼：

<body>
? ? <img id="img" src="./img/0.webp" alt=""><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");
? ? ? ? //設(shè)置一個變量，負(fù)責(zé)切換圖片，作為索引值
? ? ? ? var index = 0;
? ? ? ? //設(shè)置一個變量來存儲定時器的返回值
? ? ? ? var t = null;
? ? ? ? //定義一個數(shù)組來存儲照片的地址
? ? ? ? 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[index];
? ? ? ? ? ? // 或者是if判斷
? ? ? ? ? ? // if (index>=imgPath.length-1){
? ? ? ? ? ? // ? ? index=0;
? ? ? ? ? ? // ? ? img.src = `${imgPath[index]}`;
? ? ? ? ? ? // } else {
? ? ? ? ? ? // ? ? ?index++;
? ? ? ? ? ? // ? ? img.src = `${imgPath[index]}`
? ? ? ? ? ? // }
? ? ? ? }
? ? ? ? //上一張
? ? ? ? function changeImg1() {
? ? ? ? ? ? //同上
? ? ? ? ? ? index= index<=0?(imgPath.length-1) : --index;
? ? ? ? ? ? img.src =imgPath[index]
? ? ? ? ? ? //下面這個if判斷也可以
? ? ? ? ? ? // if (index > 0 && index <= 8) {
? ? ? ? ? ? // ? ? index--;
? ? ? ? ? ? // ? ? img.src = `${imgPath[index]}`;
? ? ? ? ? ? // } else if (index <= 0) {
? ? ? ? ? ? // ? ? index = 8;
? ? ? ? ? ? // ? ? img.src = `${imgPath[index]}`
?
? ? ? ? ? ? // }
? ? ? ? }
? ? ? ? //自動播放
? ? ? ?function autoplay1() {
? ? ? ? ? ? ? ?t= setInterval(() => {
? ? ? ? ? ? ? ? ? ?//直接將下一張的方法放在里面
? ? ? ? ? ? ? ? ? ? changeImg()
? ? ? ? ? ? ? ? }, 2000)}//2秒調(diào)用一次
? ? ? ? function stop1(){
? ? ? ? ? ? //清除定時器
? ? ? ? ? ? clearInterval(t);
? ? ? ? }
? ? </script>
</body>

效果圖就是上面的啦：