Javascript带按钮的轮播广告

╰+哭是因爲堅強的太久メ 2022-02-18 23:51 289阅读 0赞

源码

<!DOCTYPE html>
    <html>
    <head>
    	<title></title>
    	<style type="text/css">
    		.hidden{ 
    			display: none;
    		}
    		#div1{ 
    			position: absolute;
    			top: 50px;
    			left: 100px;
    		}
    		#div2{ 
    			position: absolute;
    			top: 210px;
    			left: 510px;
    		}
    		a{ 
    			display: block;
    			float: left;
    			width: 20px;
    			height: 20px;
    			background-color: #fff;
    			color: #000;
    			margin-right: 2px;
    			text-align: center;
    			line-height: 22px;
    			font-size: 12px;
    			border: 1px solid #999;
    		}
    	</style>
    	<script type="text/javascript">
    		var max=4; //总的图片数量
    		var now=1; //当前显示的图片，默认为第1张
    		var timer; //定时器
    
    		function show(id){ 
    			//判断是否传递图片编号
    			if(id){ 
    				now=id;
    				clearTimeout(timer); //清除原来的计时器
    			}
    
    			for(var i=1;i<=max;i++){ 
    				if(i==now){ 
    					$("ad"+now).style.display="block"; //显示当前图片
    				}else{ 
    					$("ad"+i).style.display="none"; //其他图片隐藏
    				}
    			}
    
    			//判断当前图片是否是最后一张，如果是，则从头再来
    			if(now==max){ 
    				now=1;
    			}else{ 
    				now++; //设置显示下一张图片
    			}
    
    			timer=setTimeout(show, 2000); //每2秒切换图片
    		}
    
    		window.onload=function(){ 
    			show();
    		};
    
    		function $(id){ 
    			return document.getElementById(id);
    		}
    	</script>
    </head>
    <body>
    	<div id="div1">
    		<img src="images/ad-01.jpg" id="ad1">
    		<img src="images/ad-02.jpg" id="ad2" class="hidden">
    		<img src="images/ad-03.jpg" id="ad3" class="hidden">
    		<img src="images/ad-04.jpg" id="ad4" class="hidden">
    	</div>
    	<div id="div2">
    		<a onmouseover="show(1)">1</a>
    		<a onmouseover="show(2)">2</a>
    		<a onmouseover="show(3)">3</a>
    		<a onmouseover="show(4)">4</a>
    	</div>
    </body>
    </html>

效果：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwMjI1NzI1_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwMjI1NzI1_size_16_color_FFFFFF_t_70]: /images/20220219/431c459a57f2409f8974d48422d1001a.png