2020 用html jQuery实现广告轮播图自动切换滚动页面鼠标悬浮下标且左右切换图片

比眉伴天荒 2022-12-19 03:53 120阅读 0赞

## 用html jQuery实现广告轮播图自动切换 滚动页面 ##

**运行图片**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDEyNDU3Nw_size_16_color_FFFFFF_t_70_pic_center]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDEyNDU3Nw_size_16_color_FFFFFF_t_70_pic_center 1]  
代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <style>
    	*{ 
    		margin:0px;
    		padding:0px;
    	}
    	#d1{ 
    		border : 1px solid #aaaaaa;
    		margin-left:200px;
    		margin-top:40px;
    		width:970px; 
    		height:300px; 
    		overflow:hidden;
    		position:relative;
    	}
    	
    	#adv,#num{ 
    		position:absolute;
    	}
    	
    	ul li{ 
    		list-style:none;
    		display:inline;
    	}
    	ul img{ 
    		width:970px; 
    		height:300px;
    		display:block;
    	}
    	
    	#num{ 
    		
    		right:300px;
    		bottom:5px;
    	}
    	
    	#num li{ 
    		float: left;
    		color: blue;
    		text-align: center;
    		line-height: 16px;
    		width: 16px;
    		height: 16px;
    		font-family: Arial;
    		font-size: 12px;
    		cursor: pointer;
    		overflow: hidden;
    		margin: 3px 1px;
    		border: 1px solid #FF7300;
    		
    	}
    	
    	.on{ 
    		line-height: 21px;
    		width: 21px;
    		height: 21px;
    		font-size: 16px;
    		margin: 0 1px;
    		border: 0;
    		background-color:navajowhite;
    		font-weight: bold;
    	}
    	#main{text-align:center; width: 1014px; margin: 0 auto;}
    #adver{ 
    	position:absolute;
    	left:10px;
    	top:30px;
    	z-index:2;
    }
    </style>
    
    <script type="text/javascript" src="js/jquery-3.5.1.js"></script>
    <script type="text/javascript">
    	$(document).ready(function(){ 
    		var adverTop=parseInt($("#adver").css("top"));
    		var adverLeft=parseInt($("#adver").css("left"));
    		$(window).scroll(function(){ 
    			var scrollTop = parseInt($(this).scrollTop());//获取滚动条翻上去的距离
    			var scrollLeft = parseInt($(this).scrollLeft());//获取滚动条向右的距离
    			$("#adver").offset({ top:scrollTop+adverTop});
    			$("#adver").offset({ left:scrollLeft+adverLeft});
    		});
    	});
    	
    	$(function(){ 
    		$('#num li').mouseenter(function(){ 
    			//取得光标指向的li的下标
    			var index = $('#num li').index(this);
    			//滚动图片
    			showImage(index);
    		}).eq(0).mouseenter();//鼠标进来的时候显示第一个
    		
    		var i = 0;
    		var taskId;
    		
    		$('#d1').hover(function(){ 
    			//光标进入，停止滚动
    			clearInterval(taskId);
    		},function(){ 
    			//设置间隔时间
    			taskId = setInterval(function(){ 
    				showImage(i);
    				i++;
    				if(i==5){ //如果是最后
    					i = 0;//回到首张
    				}
    			},1000);//设置1秒
    		}).mouseleave();//光标离开，开始滚动
    	});
    	
    	function showImage(index){ 
    		$('#adv').stop(true).animate({ 'top':-index * 300},1000);//stop(true):清空当前累积的所有的动画。
    		//取选中索引为index的来加样式on高亮且其余li同级元素来移除没有高亮光标
    		$('#num li').eq(index).addClass('on').siblings().removeClass('on');
    	}
    </script>
    </head>
    <body>
    	<div id="d1">
    		<ul id="adv">
    			<li><img src="img/adver01.jpg"/></li>
    			<li><img src="img/adver02.jpg"/></li>
    			<li><img src="img/adver03.jpg"/></li>
    			<li><img src="img/adver04.jpg"/></li>
    			<li><img src="img/adver05.jpg"/></li>
    		</ul>
    		<ul id="num">
    			<li>1</li>
    			<li>2</li>
    			<li>3</li>
    			<li>4</li>
    			<li>5</li>
    		</ul>
    	</div>
    
    <div id="main"><img src="img/main1.jpg"/><img src="img/main2.jpg"/><img src="img/main3.jpg"/></div>
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDEyNDU3Nw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/c7f95176703f47b89e47f3739c5cbb13.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDEyNDU3Nw_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/3a35aa0ed98e4baeb89f77e7a4af05fb.png