jQuery实现广告图片轮播-优化版

最新推荐文章于 2023-12-08 15:24:23 发布

大雄先生

最新推荐文章于 2023-12-08 15:24:23 发布

阅读量232

点赞数 2

文章标签： jquery javascript css

本文链接：https://blog.csdn.net/x1785551/article/details/122212755

版权

基于上篇实现广告轮播优化——————（jQuery库图片文件夹读者可自己选取）

优化后可实现：自动轮播+鼠标移入移出实现轮播+左右箭头点击轮播+点击对应数字切换轮播

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title> 广告图片轮播切换</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="adver">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
    <div class="arrowLeft"><</div><div class="arrowRight">></div>
</div>
</body>
<script src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$(".adver").mouseover(function(){
			$(".arrowLeft").show();
			$(".arrowRight").show();
		}).mouseout(function(){
			$(".arrowLeft").hide();
			$(".arrowRight").hide();
		});
		
		// $(".arrowRight").click(function(){
		// 	$(".adver").css("background":"url("images/adver02.jpg")");
		// });
		var i=0;
		var imgarray=["adver01.jpg","adver02.jpg","adver03.jpg","adver04.jpg","adver05.jpg","adver06.jpg"];
		
		
		
		function move(){
			i++;
				//如果到头 i变回0
				if(i>5){
					i=0;
				}
				//小圆形按钮 发生变化
				$("ul li").eq(i).css("background","orange").siblings().css("background","#333333");
				//背景图发生变化
				$(".adver").css("background","url(images/"+imgarray[i]+")");
			
		}
		
		var time=setInterval(move,2000);
		
		//优化 光标放到背景上面自动停止滚动 移除继续滚动
		$(".adver").mouseover(function(){
			//停止定时函数
			clearInterval(time);
		}).mouseout(function(){
			time=setInterval(move,2000);
		})
		
		
		$(".arrowRight").click(function(){
			if(i==5){
				i=0;
				$(".adver").css("background","url(images/"+imgarray[i]+")");
				// $("li:nth-of-type("+i+")").siblings().css("background","orange");
				// $("li:nth-of-type("+(i-1)+")").css("background","#333333");
				$("li:nth-of-type("+(i+1)+")").css("background","orange");
				$("li:nth-of-type("+(i+1)+")").siblings().css("background","#333333");
			}else{
			i++;
			$(".adver").css("background","url(images/"+imgarray[i]+")");
			// $("li:nth-of-type("+i+")").siblings().css("background","orange");
			// $("li:nth-of-type("+(i-1)+")").css("background","#333333");
			$("li:nth-of-type("+(i+1)+")").css("background","orange");
			$("li:nth-of-type("+(i+1)+")").siblings().css("background","#333333");
			}
			

		});
		
		$(".arrowLeft").click(function(){
			if(i==0){
				i=5;
				$(".adver").css("background","url(images/"+imgarray[i]+")");
				// $("li:nth-of-type("+i+")").siblings().css("background","orange");
				// $("li:nth-of-type("+(i-1)+")").css("background","#333333");
				$("li:nth-of-type("+(i+1)+")").css("background","orange");
				$("li:nth-of-type("+(i+1)+")").siblings().css("background","#333333");
			}else{
			i--;
			$(".adver").css("background","url(images/"+imgarray[i]+")");
			$("li:nth-of-type("+(i+1)+")").css("background","orange");
			$("li:nth-of-type("+(i+1)+")").siblings().css("background","#333333");
			}
		});
		
		//鼠标移入变换图片
		$("ul li").mouseover(function(){
			
			i=$(this).index();
			$("ul li").eq(i).css("background","orange").siblings().css("background","#333333");
			$(".adver").css("background","url(images/"+imgarray[i]+")");
		});
	});
</script>
</html>