画像自動切り替え(悪魔の実)

8344 ワード

悪魔の果実
これは私が自分で作った画像切り替えの効果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>