JQuery 实现图片轮播效果

hexionly

已于 2023-01-30 14:38:05 修改

阅读量318

点赞数 1

分类专栏： js 文章标签： jquery

于 2020-04-14 11:05:49 首次发布

本文链接：https://blog.csdn.net/hsx18787462705/article/details/105507145

版权

js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

最近一直在学习jQuery，想模仿个项目来检测一下。

jquery-2.2.3.min.js
大部分的代码模仿http://www.jq22.com/webqd1228，有略微的改动

先来看个效果图

不会弄成动态演示，只能这样了。

在这里插入图片描述

html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图片轮播</title>
		<link rel="stylesheet" type="text/css" href="css/图片轮播.css"/>
		<script src="js/jquery-2.2.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/图片轮播.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		
		<div class="big">
			<div class="pic">
				<img src="img/a1.jpg" alt="" style="display: block;background: #ccc;">
				<img src="img/a2.jpg" alt="">
				<img src="img/a3.jpg" alt="">
				<img src="img/a4.jpg" alt="">
				<img src="img/a5.jpg" alt="">
				<img src="img/a6.jpg" alt="">
				<img src="img/a9.jpg" alt="">
				<img src="img/a8.jpg" alt="">
			</div>
			<div class="l-arr arr">&lt;</div>
			<div class="r-arr arr">&gt;</div>
			<div class="but">
				<ul>
					<li class="hover"></li>
					<li></li><li></li><li></li>
					<li></li><li></li>
					<li></li><li></li>
				</ul>
			</div>
		</div>
	</body>
</html>

CSS

/* 全部框架 */
*{padding: 0; margin: 0;}
/* 最外边盒子 */
.big{width: 600px; height: 600px; margin: 10px auto; position: relative;}
/* 装图片的盒子 */
.pic{width: 600px; height: 600px; border:  solid 1px plum;}
.pic img{position: absolute; display: none;}
/* 向左向右点击按钮 */
.arr{width: 50px; height: 100%; font-size: 30px; font-weight: 900; line-height: 600px; text-align: center; color: #ccc; position: absolute; top: 0px; display: none; cursor: pointer;}
.l-arr{left: 0px;}
.r-arr{right: 0px;}
/* 鼠标移进显示向左右按钮 */
.big:hover .arr{display: block;}
.arr:hover{background: rgba(0,0,0,0.1); color: #fff;}
/* 最下边图片个数按钮 */
.but{position: absolute; bottom: 10px; right: 12px;}
.but ul li{list-style-type: none; width: 20px; height: 5px; float: left; margin-left: 3px; border-radius: 25%; background: rgba(0,0,0,0.2); cursor: pointer;}
/* 鼠标移到个数按钮上显示颜色 */
.but ul li:hover{background: rgba(0,0,0,0.7);}
/* 个数按钮第一个显示颜色 */
.but .hover{background: rgba(0,0,0,0.7);}

这个比较简单，就不多说，哪里是什么的我都注解明了了。

jQuery

下边就是jQuery的代码，主要靠这个，注释我都写的非常清楚。

点击向左向右
右和左是一样的：

// 记录当前位置
		var lIndex = 0;
		// 点击右边按钮事件
		$(".r-arr").click(function(){
			// 判断当前位置是否小于最大数，小于计数加1，不小就返回到第一张
			(lIndex<7)?(lIndex++):(lIndex=0);
			
			// 图片和计数点跟随点击变化
			$(".but ul li").eq(lIndex).addClass("hover").siblings().removeClass("hover");
			// 点击前面图片渐渐消失，新的渐渐显示
			$(".pic img").eq(lIndex).fadeIn().siblings().fadeOut();
		});
		// 点击左边按钮事件
		$(".l-arr").click(function(){
			// 判断当前位置是否大于最小数，大于计数减1，不小就返回到最后一张
			(lIndex>0)?(lIndex--):(lIndex=7);
			
			// 图片和计数点跟随点击变化
			$(".but ul li").eq(lIndex).addClass("hover").siblings().removeClass("hover");
			// 点击前面图片渐渐消失，新的渐渐显示
			$(".pic img").eq(lIndex).fadeIn().siblings().fadeOut();
		});

点击下边计数标移动

// 点击要选中的图片直接跳到相应位置
		$(".but ul li").click(function(){
			// 点击到想要的想让它想象出来
			$(this).addClass("hover").siblings().removeClass("hover");
			lIndex = $(this).index();
			// 点击后使图片直接到此位置
			$(".pic img").eq(lIndex).fadeIn().siblings().fadeOut();
			
		});

图片轮播

// 定义鼠标悬浮停止轮播
		var setPlay = null;
		// 图片间隔一段时间自动跳动
		function changeImg(){
			// 图片自动的跳转间隔
			setPlay = setInterval(function(){
				// 自动跳动，到最大值，返回第一张
				(lIndex<7)?(lIndex++):(lIndex=0);
				// 图片和计数点跟随点击变化
				$(".but ul li").eq(lIndex).addClass("hover").siblings().removeClass("hover");
				// 点击前面图片渐渐消失，新的渐渐显示
				$(".pic img").eq(lIndex).fadeIn().siblings().fadeOut();
			},3000);
		}
		// 执行此函数
		changeImg();

鼠标移入停止播放

// 鼠标悬浮在图片上停止轮播
		$(".pic").hover(function(){
			clearInterval(setPlay);
		}, changeImg);

这些就是每一小段的分开写，这里我把完整的放到这里。

$(function(){
	// 全部函数装在change函数中
	function change(){
		// 记录当前位置
		var lIndex = 0;
		// 点击右边按钮事件
		$(".r-arr").click(function(){
			// 判断当前位置是否小于最大数，小于计数加1，不小就返回到第一张
			(lIndex<7)?(lIndex++):(lIndex=0);
			
			// 图片和计数点跟随点击变化
			$(".but ul li").eq(lIndex).addClass("hover").siblings().removeClass("hover");
			// 点击前面图片渐渐消失，新的渐渐显示
			$(".pic img").eq(lIndex).fadeIn().siblings().fadeOut();
		});
		// 点击左边按钮事件
		$(".l-arr").click(function(){
			// 判断当前位置是否大于最小数，大于计数减1，不小就返回到最后一张
			(lIndex>0)?(lIndex--):(lIndex=7);
			
			// 图片和计数点跟随点击变化
			$(".but ul li").eq(lIndex).addClass("hover").siblings().removeClass("hover");
			// 点击前面图片渐渐消失，新的渐渐显示
			$(".pic img").eq(lIndex).fadeIn().siblings().fadeOut();
		});
		
		// 点击要选中的图片直接跳到相应位置
		$(".but ul li").click(function(){
			// 点击到想要的想让它想象出来
			$(this).addClass("hover").siblings().removeClass("hover");
			lIndex = $(this).index();
			// 点击后使图片直接到此位置
			$(".pic img").eq(lIndex).fadeIn().siblings().fadeOut();
			
		});
		
		// 定义鼠标悬浮停止轮播
		var setPlay = null;
		// 图片间隔一段时间自动跳动
		function changeImg(){
			// 图片自动的跳转间隔
			setPlay = setInterval(function(){
				// 自动跳动，到最大值，返回第一张
				(lIndex<7)?(lIndex++):(lIndex=0);
				// 图片和计数点跟随点击变化
				$(".but ul li").eq(lIndex).addClass("hover").siblings().removeClass("hover");
				// 点击前面图片渐渐消失，新的渐渐显示
				$(".pic img").eq(lIndex).fadeIn().siblings().fadeOut();
			},3000);
		}
		// 执行此函数
		changeImg();
		
		// 鼠标悬浮在图片上停止轮播
		$(".pic").hover(function(){
			clearInterval(setPlay);
		}, changeImg);
	}
	// 执行change函数
	change();
});

图片我就不放置在这里了，你们根据自己的需要自己找几张放进去。

hexionly

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JQuery 实现图片轮播效果

最近一直在学习jQuery，想模仿个项目来检测一下。jquery-2.2.3.min.js大部分的代码模仿http://www.jq22.com/webqd1228，有略微的改动先来看个效果图不会弄成动态演示，只能这样了。html<!DOCTYPE html><html> <head> <meta charset="utf-8"&...
复制链接

扫一扫