画像自動切り替え(悪魔の実)
8344 ワード
悪魔の果実
これは私が自分で作った画像切り替えの効果Jqueryタイマーイベントです.次の効果図を見てみましょう.次はコードです.
これは私が自分で作った画像切り替えの効果Jqueryタイマーイベントです.次の効果図を見てみましょう.次はコードです.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.4.1.js"></script>
<style>
#div1 img{
width: 300px;
height: 350px;
}
input{
width: 80px;
height: 50px;
}
</style>
</head>
<body style="text-align: center;">
<h2> </h2>
<div id="div1">
<img id="img1" src="img/page0.jpg" />
</div>
<input id="begin" type="button" value=" ">
<input id="close" type="button" value=" ">
<script>
$(function(){
var index;
var interval;
$("#begin").on("click",function(){
interval = setInterval(
function(){
// 0-9
index = Math.floor(Math.random() * 9);
$("#img1").prop("src","img/page"+index+".jpg");
},100);
});
$("#close").on("click",function(){
clearInterval(interval);
});
});
</script>
</body>
</html>