jQuery 实现图片轮播_jq 轮播多张图片-优快云博客

本文链接：https://blog.youkuaiyun.com/cyanciel/article/details/54138937

本文介绍了如何利用jQuery实现图片轮播效果。从搭建基本结构到添加鼠标移入移出事件，再到处理轮播逻辑，包括点击左右按钮的响应，以及通过z-index解决元素覆盖问题，最终实现了一个完整的图片轮播功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

自从学习jQuery之后，简直怀疑人生了。

因为，用JavaScript原生代码实现一个效果可能得用几十行代码甚至更多，而用jQuery简单的几行就轻松搞定了~~~

好啦，进入正题~~~

下面要使用jQuery实现图片轮播~~~

1.先把基础的背景搭起来：

最终使我们的图片在方框内进行轮播：

2.实现鼠标移入移出，出现左右按钮

这个比较简单，实现方法如下：

大概思路就是，当鼠标移到这个div上面时，就显示左右两个按钮，$('.ctrl').show(300);其中300是出现的这个动画持续时间，单位为毫秒数。

当然了，这个前提条件就是原来是不可见的，即，我们需要提前在左右按钮的css里设置display:none;

<script>

	$(function(){
		//鼠标移入 显示控制按钮  离开时不显示按钮
		$('.box').hover(function(){
			$('.ctrl').show(300);
			//show显示隐藏的匹配元素
			//speed：三种预定速度之一的字符串
			//slow normal fast 或表示动画时长的毫秒数值
		},
		//鼠标移走的函数方法
		function(){
			$('.ctrl').hide(300);
		});
	})

</script>

All right.

3.接下来，我们就要思考一下，轮播到底该怎么实现了。

这是一个严肃的问题，毕竟要考虑一下小学2年级的数学问题了。

要轮播嘛，首先得有图，还不能是一张图，为什么呢？

这个时候，点击左边按钮，过来的是空白，点击右边按钮，出来的也是空白。

所以，大哥，说好的轮播呢？

这就尴尬了…

还有人说，可以这样……

还可以这样……

我可以选择狗带吗……

好歹上三张图的好伐？！

又有不明白的吃瓜群众了，为什么不是这样子的啊……

虽然心很累，但是还是要温柔地回答这个问题啊……

因为，左按钮是上一页嘛，右按钮是下一页嘛，按照[正常人]的思路……都是

再不明白，跪安吧~~~

OK，下一步，把用到的图片放上来，[这里只用5张图的来测试]

更改CSS之后，就好了

又搞定一步~~~

好啦~，下面就要把我们需要的图片固定的显示出来了，

首先分析一下，刚开始看到的图片应该是第一张，现在展示的是第五张

设置CSS

		.content {
			/* 5*320px */
			width:1600px;
			height:480px;
			/* 相对自己定位 */
			position:relative;
			left:-320px;
		}

搞定。

下一步只需要把box外面超出去的部分不显示即可

		.box {
			width: 320px;
			height: 480px;
			margin: 50px auto;
			border: 5px solid lightgreen;
			position:relative;
			overflow: hidden;
		}

好嘞，现在就剩下诗诗了~，但是这个时候，我们会发现原来左右两个可爱的小按钮不见了，不，见，了……

原因是什么呢？是因为box设置了浮动，不在原来的文档流了，所以我们可爱的小按钮被无情的覆盖在下面了，但是，现在我就要让它们翻身农奴把歌唱~~~Music~~~

好吧，其实就是简单的z-index

		.ctrl {
			width:50px;
			height: 50px;
			background:none;
			border:none;
			outline: none;
			font-size: 50px;
			text-align: center;
			line-height: 50px;
			position: absolute;
			top:50%;
			color:gray;
			/* 按钮默认不显示 */
			display: none;
			z-index: 10;
		}

哦了~可爱的小按钮出来了~

ok,接下来就是设置左右两个按钮的点击事件了。

这么写完，出现bug了。尝试点击左键，图片直接略过当前图片的前一张图片，定位到了刚才移动到最前面的那张图片上。[有些绕口]

所以，我们需要在动画结束的时候，再把img的最后一张图追加到最前面

【Tips:用以下两句话也是可以实现换图，但是好像没啥动画效果啊】

好了，左边按钮点击事件差不多了，下面再来写一写右边的点击事件：

NICE.

现在可以在刚才的基础上加几个小点了~

修改CSS样式表：

之后再设置一下小圆点的相关内容即可，不单独贴出来了，附上源代码。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>目录展开关闭</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		body {
			background: #212121;
		}
		.box {
			width: 320px;
			height: 480px;
			margin: 50px auto;
			position: relative;
			overflow: hidden;
		}
		.ctrl {
			width: 50px;
			height: 50px;
			color: gray;
			border: none;
			outline: none;
			font-size: 50px;
			text-align: center;
			line-height: 50px;
			position: absolute;
			background: none;
			top: 40%;
			display: none;
			z-index: 10;
		}
		.next {
			right: 0;
		}
		.content {
			width:1600px;
			height:480px;
			position:relative;
			left: -320px;
		}
		img {
			width:320px;
			height:480px;
			display: block;
			float: left;
		}
		/* 小圆点 div的基础设置 */
		.dot {
			width: 100%;
			height: 50px;
			position: absolute;
			bottom: 0px;
			text-align: center;
			line-height: 50px;
		}
		/*小圆点的基础设置*/
		.dot div{
			
			width: 10px;
			height: 10px;
			border-radius: 7px;
			border: 2px solid orange;
			background-color: purple;
			display: inline-block;
		}
		/*被选中的小圆点的基础设置*/
		.dot .selected {
			border: 2px solid purple;
			background-color: orange;
		}
	</style>
</head>
<body>
	<div class="box">
		<button class="ctrl prev"><</button>
		<button class="ctrl next">></button>
		<div class="content">
			<!--320*480-->
			<img src="cyan/images/05.png" />
			<img src="cyan/images/01.png" />
			<img src="cyan/images/02.png" />
			<img src="cyan/images/03.png" />
			<img src="cyan/images/04.png" />
		</div>
		<div class="dot">
			<div class="selected"></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
	</div>
</body>
<script src="jquery-1.8.3.min.js"></script>
<script>
	$(function(){
		//记录当前选中小圆点的下标
		var index = 0;
		//鼠标移入 显示控制按钮  离开时不显示按钮
		$('.box').hover(function(){
			$('.ctrl').show(300);
			//show显示隐藏的匹配元素
			//speed：三种预定速度之一的字符串
			//slow normal fast 或表示	
		},
		//鼠标移走的函数方法
		function(){
			$('.ctrl').hide(300);
		});
		//添加前后按钮的点击事件
		$('.prev').click(function(){
			//点击前面的按钮就要把当前的图片之前的图显示出来
			//也就是说要改变content中css left的偏移量，因为我们点左边的按钮，实际上图片是向后走的，所以偏移量是增加的

			//完成上面这一步之后，我们测试左边按钮，会发现点到最后一张的时候，会有空白出来
			//这是因为，我们还没有把后面的图放到前面呀
			//把最后一张图追加到最前面
			//测试的时候，当我们连续点击多次左键，会发现，当我们把鼠标移走的时候，图依然在不停的动
			//所以，我们需要在动画进行之前判断一下是否有动画在执行，如果有就直接返回
			
			if ($('.content').is(':animated')) {
				return;
			}
			$('.content').animate({left:'+=320px'},'normal','swing',function(){

				//等到动画结束的时候，把最后一张图加到最前面
				$('.content').prepend($('img:last'));
				//再把left的值设置回去
				$('.content').css('left','-320px');

				//改变用于指示的小圆点
				if(--index == -1){
					index = 4;
				}
				$('.dot div').eq(index).addClass('selected').siblings().removeClass('selected');
			});	

			/*$('.content').animate({left:'=0px'},'slow');
			$('.content').prepend($('img:last'));*/
		});
		
		$('.next').click(function(){
			if ($('.content').is(':animated')) {
				return;
			}
			$('.content').animate({left:'-=320px'},'normal','swing',function(){

				//等到动画结束的时候，把最前面一张图加到最后面
				$('.content').append($('img:first'));
				//再把left的值设置回去
				$('.content').css('left','-320px');
				//更新小圆点
				if(++index == 5){
					index = 0;
				}
				$('.dot div').eq(index).addClass('selected').siblings().removeClass('selected');
			});	

			/*$('.content').animate({left:'=0px'},'slow');
			$('.content').prepend($('img:last'));*/
		});
	})
</script>
</html>