jQuery实现切换式轮播图_切换器轮播按键-优快云博客

本文链接：https://blog.youkuaiyun.com/JohnsonSmile/article/details/90298779

博客围绕jQuery和轮播图展开，虽未给出具体内容，但推测是关于使用jQuery技术来实现轮播图效果，这在前端页面展示中较为常见。

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

<!DOCTYPE html>
<html>
<head>
	<title>banner</title>
	<script src="jquery-3.4.1.js"></script>
	<style>
		.banner{
			display:inline-block;
		}
		.banner>img{
			display:none;
		}
		body>img{
			float:right;
		}
	</style>
	<script>
		window.onload=function (){
			var imgdir = ["./jpg/1.jpg", "./jpg/2.jpg", "./jpg/3.jpg"];
			var imgdir2 = $(".banner>img");
			var imgshowindex = 0;
			var imgshowindex2 = 0;
			//轮播图1
			function changeimg(){
				var banner = $("#banner");
				// console.log(banner.attr("src"))
				banner.attr("src",imgdir[imgshowindex]);
				imgshowindex ++;
				if(imgshowindex >= imgdir.length){
					imgshowindex = 0;
				}
			}
			// 轮播图2
			function changeimg2(){
				var temp = imgshowindex2 - 1;
				if(temp < 0){
					temp = imgdir2.length - 1;
				}
				imgdir2[temp].style.display = "none";
				imgdir2[imgshowindex2].style.display = "block";
				imgshowindex2 ++;
				if(imgshowindex2 >= imgdir2.length){
					imgshowindex2 = 0;
				}
			}
			var imgbanner1 = setInterval(changeimg,2000);
			var imgbanner2 = setInterval(changeimg2,2000);
		}
	</script>
</head>
<body>
	<div class="banner">
		<img src="./jpg/1.jpg" name="bnimg1">
		<img src="./jpg/2.jpg" name="bnimg2">
		<img src="./jpg/3.jpg" name="bnimg3">
	</div>
	<img src="./jpg/1.jpg" id="banner">
</body>
</html>