jquery实现轮播图

最新推荐文章于 2024-08-27 19:30:26 发布

小嘴鱼

最新推荐文章于 2024-08-27 19:30:26 发布

阅读量4.6k

点赞数 1

分类专栏：轮播图基础功能

本文链接：https://blog.csdn.net/m0_60187384/article/details/122203153

版权

jquery javascript 前端

基础同时被 3 个专栏收录

5 篇文章 0 订阅

订阅专栏

功能

3 篇文章 0 订阅

订阅专栏

轮播图

1 篇文章 0 订阅

订阅专栏

实现功能：

通过定时函数使图片自动轮播，鼠标悬浮时停止轮播

点击按钮或者箭头切换图片并且鼠标离开时图片从当前位置继续轮播

切换按钮背景颜色的改变以及箭头的隐藏和显示

实现代码：

html部分：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link href="css/lun.css" rel="stylesheet" />
	</head>
	<body>
	    <div class="outer">
	        <ul class="img">
	            <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>
	        </ul>
	        <ul class="num">
	            <li>1</li>
	            <li>2</li>
	            <li>3</li>
	            <li>4</li>
	        </ul>
	        <div class="btn_left button"> &lt; </div>
	        <div class="btn_right button"> &gt; </div>
	 
	    </div>
	</body>
</html>

jquery部分：

<script src="js/jquery-1.12.4.js"></script>
	<script type="text/javascript">		
		$(function(){
			//全局变量
			let i =0;
			//初始化按钮
			$(".num li").first().css("background","orange").siblings().css("background","grey");
			//初始化，第一张图作为背景其他不显示
			$(".img li").first().fadeIn().siblings().fadeOut();
			
			//函数用来移动背景
			function move(){
				i++;
				if(i>3){
					i=0
				}
				$(".num li").eq(i).css("background","orange").siblings().css("background","grey");
				$(".img li").eq(i).fadeIn().siblings().fadeOut();
			}
			
			//通过定时函数轮播自动切换
			var time =setInterval(move,3000);
			//悬浮时停止轮播
			$(".outer").mouseover(function(){
				clearInterval(time);
			}).mouseout(function(){
				time=setInterval(move,3000);//移出时继续轮播
			});
			
			//点击右边箭头改变图片
			$(".btn_right").click(function(){
				move();
			})
			//点击左边箭头改变图片
			$(".btn_left").click(function(){
				if(i<=-1){
					i=3
				}
				i-=2;	
				move();	
			})
			//移入按钮图片变化
			$(".num li").mouseover(function(){
				i=$(this).index();//移入时索引，目的是让移出时从当前位置继续轮播
				$(".num li").eq(i).css("background","orange").siblings().css("background","grey");
				$(".img li").eq(i).fadeIn().siblings().fadeOut();
			})
			
		})
			
	</script>