图片自动切换(恶魔果实)

图片自动切换----恶魔果实篇

这是我自己做的一个关于图片切换的效果
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>

你可能感兴趣的:(JavaScript)