纯JS与jQuery实现图片轮播-CSDN博客

本文介绍如何使用纯JavaScript及jQuery实现简单的图片轮播功能。通过两个不同技术手段对比，展示了基本的页面布局、样式设定及交互逻辑。文章包含完整的代码示例，适合初学者实践。

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

视频课堂https://edu.csdn.net/course/play/7621

使用纯粹的javascript来实现的代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>动画相册</title>
		<!--2.第2步设计页内样式-->
		<style>
			img{width:320px;height: 460px;}
		</style>
		<!--3.第3步设计动态的js-->
		<script>
			var num=0;
			function back(){
				var img=document.getElementById("img");
				num--;
				if(num<0)
					num=9;
				img.src="img/"+num+".jpg";
			}
			function next(){
				var img=document.getElementById("img");
				num++;
				if(num>9)
				num=0;
				img.src="img/"+num+".jpg";
			}
		</script>
	</head>
	<body>
		<!--1.第一步设计页内布局-->
		<img src="img/0.jpg" id="img" /><br />
		<button onclick="back()">后退</button>
		<button onclick="next()">前进</button>
	</body>
</html>

使用jQuery代码来实现的代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			img{display: block;width: 320px;height: 460px;}
		</style>
		<!--3.使用jQuery版本的格式来实现-->
		<script src="js/jquery-1.8.3.min.js"></script>
	</head>
	<body>
		<img src="img/0.jpg" id="img"/>
		<button>后退</button>
		<button>前进</button>
		<script>
			/*1.找对象；就是找到我们要操作的对象$("button"):找到一批
			 *2.定事件；就是找出来对象要响应的事件;click:代替了onclick
			 *3.匿名函数：就是省略了名称的函数
			 */
			//alert($("button").html());
			//$("button").click(alert('aaa'));
			$("button").click(function(){
				var num=0;
				//alert('bbb');
				//alert($("button").html());内容一致;
				//alert($(this).text());//$(this):当前按钮
				//attr可以设置对象的属性或取值；
				if($(this).text()=="后退"){
					num--;
					if(num<0)num=9;
				}else{
					num++;
					if(num>9)num=0;
				}
				$("#img").attr("src","img/"+num+".jpg");
				//调用该函数
				setInterval("autoRun()",1000);
			});
			/*定时功能加上去
			 */
			var num=0;
			function autoRun(){
				num++;
				if(num>9)num=0;
				$("#img").attr("src","img/"+num+".jpg");
			}
		</script>
	</body>
</html>

动画效果如下：