【jQuery】前端项目实践案例4——制作图片轮换效果（修改图像的src属性值）

本文通过设置图像的src属性，利用jQuery制作了轮播图效果。详细介绍了轮播图的实现原理、思路和具体步骤，包括网页内容制作、CSS样式添加、jQuery文件引入及代码编写。在鼠标交互时，轮播图能暂停并改变轮播数字样式，离开时恢复轮播。

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

轮播图实现效果：

轮播图实现原理：

通过设置图像的 src 属性，显示不同的图片，借助循环动画实现轮播图效果。

轮播图实现思路：

（1）div+css布局，制作轮播图列表以及配套的数字列表。

（2）轮播图默认轮播，即在ready事件里，直接执行函数。

（3）轮播图事件的执行：循环执行使用setInterval方法。

（4）鼠标移上去，轮播图停止，同时轮播数字样式发生变化，鼠标离开，轮播图继续。

（5）使用 clearInterval() 方法，可取消由 setInterval() 函数设定的定时执行操作。

jQuery制作轮播的具体步骤：

第一步：制作网页内容（轮播图列表和轮播数字列表）

		<div>
			<img src="img/001.jpg" /><!-- 这里用来放置图片 -->
			<ul><!-- 这里用来放数字 -->
				<li class="bj">1</li>
				<li>2</li>
				<li>3</li>
			</ul>
		</div>

初始效果：

第二步，添加CSS样式

实现效果：

关键代码：

		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			div {
				width: 600px;	/* 图片的宽度是600px,高度是300px */
				margin: 20px auto;
				position: relative;
			}
			ul li {
				float: left;
				list-style: none;
				width: 20px;
				height: 20px;
				border: 1px solid red;
				margin-right: 10px;
				text-align: center;
			}			
			ul {
				position: absolute;  /* 一般使用父相子绝,来进行元素定位 */
				overflow: hidden; 	/* 清除li浮动带来的,浮动塌陷 */
				width: 96px;				
				top: 278px;    /* 父级元素的高度(图片高度)300px-li的高度20px-上下边框1px*2=278px */
				left: 504px;  /* 父级总宽度600px-ul宽度96px=504px */
			}
			.bj {
				background-color: pink;
			}
		</style>

第三步：引入jQuery文件

<script src="js/jquery-3.4.1.min.js"></script><!--引入jquery-->

第四步：写jquery代码

		<script>
			var arr = ['img/001.jpg', 'img/002.jpg', 'img/003.jpg']; //声明一个数组，用来存放图像路径
			var k = 0; //声明一个变量，用来做数组里的索引	
			var t;//声明一个全局变量
			//声明一个方法，用来更改图像的src属性值
			function changeSrc() {
				k++;
				if (k > 2) 
				{
					k = 0; //因为数组里只存放了3个元素，最大索引是2
				}
				var path = arr[k]; //通过索引找到数组中的元素，赋值给变量path
				$("img").attr("src", path); //找到图像元素，设置图像的src属性值为变量path
				//当图像更换的时候，对应修改数字的背景色
				$("li").removeClass("bj"); //先清空所有数字的背景色
				$("li").eq(k).addClass("bj")//根据索引，找到数字，添加背景属性
			}
			//jQuery入口函数
			$(document).ready(function() {
				t =setInterval(changeSrc, 2000);//循环动画，2秒钟执行一次
				$("img").mouseover(function(){
					clearInterval(t) ;	// 取消由 setInterval() 函数设定的定时执行操作		
				});
				$("img").mouseout(function(){
					t =setInterval(changeSrc, 2000);
				})
			})
		</script>

部分代码分析：

setInterval() 方法：按照指定的周期（以毫秒计），来调用函数或表达式（循环调用）。

clearInterval() 方法：可取消由 setInterval() 函数设定的定时执行操作。

clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。

注意: 要使用 clearInterval() 方法, 在创建执行定时操作时要使用全局变量。

对比案例：【jQuery】前端项目实践案例4——使用jquery制作轮播图效果！

本案例完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			div {
				width: 600px;	/* 图片的宽度是600px,高度是300px */
				margin: 20px auto;
				position: relative;
			}
			ul li {
				float: left;
				list-style: none;
				width: 20px;
				height: 20px;
				border: 1px solid red;
				margin-right: 10px;
				text-align: center;
			}			
			ul {
				position: absolute;  /* 一般使用父相子绝,来进行元素定位 */
				overflow: hidden; 	/* 清除li浮动带来的,浮动塌陷 */
				width: 96px;				
				top: 278px;    /* 父级元素的高度(图片高度)300px-li的高度20px-上下边框1px*2=278px */
				left: 504px;  /* 父级总宽度600px-ul宽度96px=504px */
			}
			.bj {
				background-color: pink;
			}
		</style>
		<script src="js/jquery-3.4.1.min.js"></script>
		<script>
			var arr = ['img/001.jpg', 'img/002.jpg', 'img/003.jpg']; //声明一个数组，用来存放图像路径
			var k = 0; //声明一个变量，用来做数组里的索引	
			var t;//声明一个全局变量
			//声明一个方法，用来更改图像的src属性值
			function changeSrc() {
				k++;
				if (k > 2) 
				{
					k = 0; //因为数组里只存放了3个元素，最大索引是2
				}
				var path = arr[k]; //通过索引找到数组中的元素，赋值给变量path
				$("img").attr("src", path); //找到图像元素，设置图像的src属性值为变量path
				//当图像更换的时候，对应修改数字的背景色
				$("li").removeClass("bj"); //先清空所有数字的背景色
				$("li").eq(k).addClass("bj")//根据索引，找到数字，添加背景属性
			}
			//jQuery入口函数
			$(document).ready(function() {
				t =setInterval(changeSrc, 2000);//循环动画，2秒钟执行一次
				$("img").mouseover(function(){
					clearInterval(t) ;	// 取消由 setInterval() 函数设定的定时执行操作		
				});
				$("img").mouseout(function(){
					t =setInterval(changeSrc, 2000);
				})
			})
		</script>
	</head>
	<body>
		<div>
			<img src="img/001.jpg" /><!-- 这里用来放置图片 -->
			<ul><!-- 这里用来放数字 -->
				<li class="bj">1</li>
				<li>2</li>
				<li>3</li>
			</ul>
		</div>
	</body>
</html>