溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關JS如何控制GIF圖片停止與顯示的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
在擲骰子游戲中，通過需要控制骰子的轉動以及轉動結果的顯示，骰子的轉動可以用GIF動圖來實現，每次投擲骰子的結果可以通過點擊按鈕顯示靜態圖片。代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS實現GIF動圖的停止與開始(骰子)</title>
<style type="text/css">
</style>
</head>
<body>
<!--動圖-->
<img src="img/all/webDemo4-1.gif" alt="gifImg" id="gifImg" />
<input type="button" name="btn" id="btn" value="暫停" οnclick="stop()" />
</body>
<script type="text/javascript">
var image = document.getElementById("gifImg");
var button = document.getElementById("btn");
function stop() {
var max = 6;
var randomNum = Math.floor(Math.random()*max)+1;
console.log(randomNum);
if((button.value == "暫停") && randomNum == 1) {
//靜態圖片，可以自定義控制顯示
image.src = "img/all/link1.jpg"
button.value = '播放';
console.log('已暫停');
} else if((button.value == "暫停") && randomNum == 2) {
//靜態圖片，可以自定義控制顯示
image.src = "img/all/link2.jpg"
button.value = '播放';
console.log('已暫停');
} else if((button.value == "暫停") && randomNum == 3) {
//靜態圖片，可以自定義控制顯示
image.src = "img/all/link3.jpg"
button.value = '播放';
console.log('已暫停');
} else if((button.value == "暫停") && randomNum == 4) {
//靜態圖片，可以自定義控制顯示
image.src = "img/all/link4.jpg"
button.value = '播放';
console.log('已暫停');
} else if((button.value == "暫停") && randomNum == 5) {
//靜態圖片，可以自定義控制顯示
image.src = "img/all/link5.jpg"
button.value = '播放';
console.log('已暫停');
} else if((button.value == "暫停") && randomNum == 6) {
//靜態圖片，可以自定義控制顯示
image.src = "img/all/link6.jpg"
button.value = '播放';
console.log('已暫停');
} else{
//動圖
image.src = "img/all/webDemo4-1.gif"
button.value = '暫停';
console.log('已開始');
}
}
</script>
</html>感謝各位的閱讀！關于“JS如何控制GIF圖片停止與顯示”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
