广告轮播脚本

浅浅的花香味﹌ 2022-04-02 07:26 198阅读 0赞

广告轮播，鼠标悬停停止轮播

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>广告轮播图</title>
    		<style type="text/css">
    			#adver{
    				/*border: 1px solid salmon;*/
    				width: 730px;
    				height: 454px;
    				margin: 0 auto;
    			}
    			ul{
    				/*border: 1px solid rosybrown;*/
    				width: 30%;
    				height: 25px;
    				margin: 0 auto;
    				position: relative;
    				top: 420px;
    				
    			}
    			li{
    				list-style: none;
    				width: 20px;
    				height: 20px;
    				line-height: 20px;
    				border-radius: 10px;
    				float: left;
    				color: white;
    				background: dimgray;
    				text-align: center;
    				margin-left: 5px;
    			}
    			#lArrow,#rArrow{
    				margin-top: 170px;
    				width: 50px;
    				height: 30px;
    				font-size: 30px;
    				text-align: center;
    				line-height: 30px;
    				background: lightgray;
    				opacity: 0.7;
    				display: none;
    				cursor: pointer;
    			}
    			#lArrow{
    				float: left;
    			}
    			#rArrow{
    				float: right;
    			}
    			
    		</style>
    	</head>
    	<body>
    		<div id="adver">
    			<ul>
    				<li>1</li>
    				<li>2</li>
    				<li>3</li>
    				<li>4</li>
    				<li>5</li>
    				<li>6</li>
    			</ul>
    			<div id="lArrow"><</div><div id="rArrow">></div>
    		</div>
    	</body>
    </html>
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <script type="text/javascript">
    	var i = 1;
    	var imgFlash = setInterval("changeImg()",1500);
    		function changeImg(){
    			var oldIndex = i - 1;
    			if (i < 6){
    				i++;
    			}else{
    				i = 1;
    			}
    			var index = i - 1;
    			$("#adver").css("background-image","url(img/adver0" + i + ".jpg)");
    			$("li:eq(" + index +")").css("background-color","orange");
    			$("li:eq(" + oldIndex +")").css("background-color","dimgray");
    		}
    	$(function(){
    		
    		$("li:eq(0)").css("background-color","orange");
    		$("#adver").css("background-image","url(img/adver01.jpg)").mouseover(function(){
    			$("#lArrow,#rArrow").show();
    			clearInterval(imgFlash);
    		}).mouseout(function(){
    			$("#lArrow,#rArrow").hide();
    			imgFlash = setInterval("changeImg()",1500);
    		});
    		$("#lArrow").click(function(){
    			var oldIndex = i - 1;
    			if (i == 1){
    				i = 6;
    			}else{
    				i--;
    			}
    			var index = i - 1;
    			$("#adver").css("background-image","url(img/adver0" + i + ".jpg)");
    			$("li:eq(" + index +")").css("background-color","orange");
    			$("li:eq(" + oldIndex +")").css("background-color","dimgray");
    		})
    		$("#rArrow").click(function(){
    			var oldIndex = i - 1;
    			if (i == 6){
    				i = 1;
    			}else{
    				i++;
    			}
    			var index = i - 1;
    			$("#adver").css("background-image","url(img/adver0" + i + ".jpg)");
    			$("li:eq(" + index +")").css("background-color","orange");
    			$("li:eq(" + oldIndex +")").css("background-color","dimgray");
    		})
    	})
    </script>