2020 用html jQuery實現廣告輪播圖自動切換 滾動頁面 滑鼠懸浮下標且左右切換圖片

AlikeLin發表於2020-11-05
HTMLjQuery

用html jQuery實現廣告輪播圖自動切換 滾動頁面

執行圖片

在這裡插入圖片描述
在這裡插入圖片描述
程式碼

<!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>

相關文章