JQuery轮播图

最新推荐文章于 2024-08-27 19:30:26 发布

·港岛妹妹

最新推荐文章于 2024-08-27 19:30:26 发布

阅读量80

点赞数

分类专栏： js练习题文章标签： js

本文链接：https://blog.csdn.net/qq_44417271/article/details/112587011

版权

js练习题专栏收录该内容

6 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style type="text/css">
			*{margin: 0;padding: 0;}
			.main{
				width: 1000px;
				margin: 0 auto;
				margin-top: 50px;
				position: relative;
				overflow: hidden;
			}
		
			
			#left{
				position: absolute;
				top: 45%;
				left: 20px;
				transition: all 0.5s;
				opacity: 0.7;
				cursor: pointer;
			}
			#right{
				position: absolute;
				top: 45%;
				right: 20px;
				transition: all 0.5s;
				opacity: 0.7;
				cursor: pointer;
			}
			#left:hover {
				transform: scale(1.3);
				opacity: 1;
			}
			#right:hover{
				transform: scale(1.3);
				opacity: 1;
			}
			.yuan{
				position: absolute;
				bottom: 15px;
				left: 50%;
				transform: translate(-50%,0);
			}
			.yuan span{
				display: block;
				width: 15px;
				height: 15px;
				background: #fff;
				border-radius: 50%;
				float: left;
				margin-left: 10px;
			}
			.yuan span.focus{
				background: hotpink;
			}
			.imgWrap{
				width: 1000000px;
				
			}
			.imgWrap li{
				float: left;
				list-style: none;
			}
		</style>
	</head>
	<body>
		
		<div class="main">
			<ul class="imgWrap" style="margin-left: 0;">
				<li><img src="./images/1.jpg" ></li>
				<li><img src="./images/2.jpg" ></li>
				<li><img src="./images/3.jpg" ></li>
				<li><img src="./images/4.jpg" ></li>
				<li><img src="./images/5.jpg" ></li>
				<li><img src="./images/6.jpg" ></li>
			
			</ul>
			<p id="left"><img src="images/l.png" ></p>
			<p id="right"> <img src="images/r.png" ></p>
			
			<div class="yuan">
				
			</div>
		</div>
		
		<script src="jquery.min.js"></script>
		<script type="text/javascript">
			let n=0;
			let liList=$(".imgWrap li")
			let ul=$(".imgWrap")
			function changImg(){
				ul.animate({
					marginLeft:-(n*1000)
				})
				spanList.removeClass("focus")
				spanList.eq(n).addClass("focus")
			}
			$("#right").click(function(){
				if(n<liList.length-1){
					n++
				}else{
					n=0
				}
				changImg()
			})
			$("#left").click(function(){
				if(n===0){
					n=liList.length-1
				}else{
					n--
				}
				changImg()
			})
			let yuan=$(".yuan")
			for(var i=0;i<liList.length;i++){
				var span=document.createElement("span")
				yuan.append(span)
			}
			let spanList=$(".yuan span")
			spanList.eq(0).addClass("focus")
			spanList.click(function(){
				n=$(this).index()
				changImg()
			})

		</script>
		
	</body>
</html>