JS循环定时器之轮播图案例

Love The Way You Lie 2021-12-12 21:29 143阅读 0赞

<!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<title>轮播图</title>
    		<script type="text/javascript">
    			var count = 0;
    
    			function run() {
         
    				var l = document.getElementById("light")
    				count++;
    				if(count % 3 == 1) {
         
    					l.src = "img/banner_1.jpg"
    				} else if(count % 3 == 2) {
         
    					l.src = "img/banner_2.jpg"
    				} else {
         
    					l.src = "img/banner_3.jpg"
    				}
    			}
    		</script>
    	</head>
    
    	<body>
    		<img id="light" src="img/banner_1.jpg" width="100%" />
    		<script type="text/javascript">
    			setInterval("run()", 2000)
    		</script>
    	</body>
    
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU5MTczMg_size_16_color_FFFFFF_t_70]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU5MTczMg_size_16_color_FFFFFF_t_70 1]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU5MTczMg_size_16_color_FFFFFF_t_70 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU5MTczMg_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190712210124440.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU5MTczMg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU5MTczMg_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2019071221013389.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU5MTczMg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU5MTczMg_size_16_color_FFFFFF_t_70 2]: /images/20211210/f5598a30918c4924a7779a97e3ac65a1.png