jquery实现轮播图

最新推荐文章于 2024-05-09 09:45:20 发布

胡哥居士

最新推荐文章于 2024-05-09 09:45:20 发布

阅读量3.5k

点赞数 10

分类专栏：前端开发文章标签： jquery 轮播图 web web前端

本文链接：https://blog.csdn.net/qq_40707650/article/details/83037605

版权

前端开发专栏收录该内容

26 篇文章 0 订阅

订阅专栏

今天来讲一讲jquery如何实现轮播图
首先，什么是轮播图，给个图片一看即知

这个就是轮播图，实现图片的自动播放，并且点击小圆点是也可以切换图片。
首先来讲一讲它的原理：HTML静态页面就不用我说了吧，这里直接给出代

index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>轮播图</title>
	<link rel="stylesheet" href="css/index.css">
</head>
<body>
	<div class="pic">
		<div class="img">
			<img src="img/1501227948b99.jpg" alt="">
			<img src="img/15174043270db.jpg" alt="">
			<img src="img/1492956580491.jpg" alt="">
			<img src="img/1474876382c65.jpg" alt="">
			<img src="img/1491464115ad5.jpg" alt="">
			<img src="img/15092895460f8.jpg" alt="">
			<img src="img/150391694737f.jpg" alt="">
			<img src="img/149900033939a.jpg" alt="">
		</div>
		<div class="swiper">
			<b class='rudis'></b>
			<b></b>
			<b></b>
			<b></b>
			<b></b>
			<b></b>
			<b></b>
			<b></b>
		</div>
	</div>
	<script src='../jquery-1.12.4.js'></script>
	<script src='js/index.js'></script>
</body>
</html>

设置图片展示的div，还有小圆点div，设置默认第一个小圆点显示，小圆点的背景变色原理是给小圆点添加一个类名，当轮到这张图片时添加类名，其他的小圆点不添加类名。图片显示原理是：设置图片默认为隐藏或none，当轮到这个图片显示是则开放这个图片的显示，其他的图片为隐藏。

index.css

*{
	margin: 0;
	padding: 0;
}
.pic{
	position:relative;
	width: 1365px;
	height: 450px;
	background: url('../img/t014346b20d9fabb2ec.jpg');
}
.img img{
	position:absolute;
	height: 450px;
	width: 708px;
	float: left;
}
.img{
	position: absolute;
	top: 0;
	height: 450px;
	width: 708px;
	margin-left: 315px;
}
.rudis{
	background-color: #fff;
}

.swiper{
	position: absolute;
	top: 400px;
	left: 545px;
}
.swiper b{
	display: inline-block;
	width: 10px;
	height: 10px;
	border: 2px solid black;
	border-radius: 50%;
	margin-left: 10px;
}

index.js

$(function(){
	var i = 0;//定义索引，图片和小圆点共用
	var timer;//定义定时函数
	$('.pic .img img').eq(0).show().siblings().hide();//定义默认的显示图片，也就是索引为0的那张图片
	start();//开始实现图片轮播，用到了定时器
	$('b').hover(function(){//当鼠标运动到某个小圆点是，切换图片
		clearInterval(timer);//并且清除定时
		i=$(this).index();//获取当前鼠标运动到的小圆点的索引
		change();//执行切换图片的函数
	});
    $('b').mouseleave(function(){
		start();//定义当鼠标离开小圆点时继续执行定时函数，轮播开始
	});
	function start(){//轮播开始函数
		timer = setInterval(function(){//自动轮播定时函数
			i++;//索引进行累加，防止图片只显示一张
			if(i==8){
				i=0;//我这里是用的8张图片，当索引为8时，图片没有了，将索引清零
			}
			change();//继续执行图片轮播
		},2000)//2000是多久切换一次图片，表示两秒
	};
	function change(){//图片显示函数，这里的fadeOut和fadeIn是图片显示方式是淡入淡出
		$('.pic .img img').eq(i).fadeIn(300).siblings().stop().fadeOut(300);//eq选择当前图片，siblings表示排除其他图片，stop表示其他图片停止切换，只切换当前图片
		$('b').eq(i).addClass('rudis').siblings().removeClass('rudis');//这里是设置小圆点的背景颜色改变，用的是添加类名的方法，因为我们在css文件里设置了当类名为‘rudis’时设置背景颜色为白色，其他的圆点设置为移除类名，所以其他的没有添加背景颜色
	}
})

胡哥居士

关注

10
点赞
踩
50

收藏

觉得还不错? 一键收藏
3
评论
jquery实现轮播图

今天来讲一讲jquery如何实现轮播图首先，什么是轮播图，给个图片一看即知这个就是轮播图，实现图片的自动播放，并且点击小圆点是也可以切换图片。首先来讲一讲它的原理：HTML静态页面就不用我说了吧，这里直接给出代 index.html &lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; ...
复制链接

扫一扫