使用JQuery完成轮播图

碌碌111

已于 2023-05-23 11:23:10 修改

阅读量98

点赞数

文章标签： css html javascript

于 2023-05-23 11:01:08 首次发布

本文链接：https://blog.csdn.net/qq_66874942/article/details/130822906

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>轮播图</title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			#content{
				width: 500px;
				height: 350px;
				margin: 10px auto;
				position: relative;
			}
			#content img{
				width: 100%;
				height: 100%;
			}
			#before{
				display: block;
				width: 100px;
				height: 35px;
				position: absolute;
				left: 20px;
				top: 150px
			}
			#after{
				display: block;
				width: 100px;
				height: 35px;
				position: absolute;
				right: 20px;
				top: 150px;
			}
		</style>
		<script src="js/jquery.min.js"></script>
		<script>
			$(function(){
				//1.使用数组存储图片的地址，使用索引循环取出地址
				// var pic=["img/case1.jpg","img/case2.jpg","img/case3.jpg",
				//          "img/case4.jpg","img/case5.jpg","img/case6.jpg"];
				// var n=0;
				
				// setInterval(function(){
				// 	n++;
				// 	//如果大于5，重新从第0个开始
				// 	if(n>5){
				// 		n=0;
				// 	}
				// 	//从数组中取出地址，设置图片的链接
				// 	$("#content img").attr("src",pic[n]);
				// },1000);
				
								
				//2.每隔多少毫秒直接修改图片的地址编号
				var n=1;
				setInterval(function(){
					n++;
					if(n>6){
						n=1;
					}
					$("#content img").attr("src","img/case"+n+".jpg");
				},5000);
				
				
				//点击播放上一页
				$("#before").click(function(){
					//1.首先需要知道当前播放的是哪一张图片的地址 找到编号 3   让3-1 就是上一张
					var src=$("#content img").attr("src");
					//2.查找地址字符串中最后的.jpg的位置索引   img/case1.jpg
					var index=src.lastIndexOf(".jpg");
					//3.使用.jpg的索引-1 就是图片编号的索引位置，根据索引拿到数字编号字符，再转换成整数
					var num=parseInt(src.charAt(index-1));
					
					var n
					if(num==1){
						n=6;	  //如果第一张，显示第6张
					}else{
						n=num-1;  //如果不是第一张，显示第-1张
					}
					//4.让数字编号-1 重新设置图片的地址，就是上一张的操作
					$("#content img").attr("src","img/case"+(n)+".jpg")
					
				});
				
				//点击播放上一页
				$("#after").click(function(){
					//1.首先需要知道当前播放的是哪一张图片的地址 找到编号 3   让3+1 就是下一张
					var src=$("#content img").attr("src");
					//2.查找地址字符串中最后的.jpg的位置索引   img/case1.jpg
					var index=src.lastIndexOf(".jpg");
					//3.使用.jpg的索引-1 就是图片编号的索引位置，根据索引拿到数字编号字符，再转换成整数
					var num=parseInt(src.charAt(index-1));
					
					var n
					if(num==6){
						n=1;
					}else{
						n=num+1;
					}
					//4.让数字编号-1 重新设置图片的地址，就是上一张的操作
					$("#content img").attr("src","img/case"+(n)+".jpg")
					
				});
			});
		</script>
	</head>
	<body>
		<div id="content">
			<img src="img/case1.jpg" />
			<button id="before">上一页</button>
			<button id="after">下一页</button>
		</div>
	</body>
</html>