jquery实现轮播图效果

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

since �

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

阅读量9.8k

点赞数 6

分类专栏： jquery

本文链接：https://blog.csdn.net/h5_since/article/details/90746775

版权

jquery 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#oImg{
				 width: 500px;
				 height:300px ;
				 background: url(img/0.jpg) no-repeat;
				 background-size:500px 300px ;
				 position: relative;
				 margin:20px auto ;
			}
			#btn1{
				width: 30px;
				height: 50px;
				position: absolute;
				left: 0px;
				top: 110px;
				background: transparent;
				border: none;
				color: red;
				font-size: 48px;
			}
			#btn2{
				width: 30px;
				height: 50px;
				position: absolute;
				left: 470px;
				top: 110px;
				background: transparent;
				border: none;
				color: red;
				font-size: 48px;
			}
			li{
				list-style:none;
				width:10px ;
				height:10px ;
				background:white;
				border-radius: 50%;
				margin: 8px;
				float: left;
			}
			ul{
				position: absolute;
				top: 230px;
				left: 135px;
			}
			
		</style>
	</head>
	<body>
		<div id="oImg">
			<input type="button"  id="btn1" value="<"/>
			<input type="button"  id="btn2" value=">"/>
			<ul>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
			</div>
	</body>
</html>
<script src="js/myjQuery.js"></script>
<script>
	let i=0;
	$("li").eq(0).css({background:"red"});
	$("#btn2").click(function(){
		if(i<5){
			i++;
		}else{
			i=0;
		}
		$("#oImg").css({background:"url(img/"+i+".jpg) no-repeat",backgroundSize:"500px 300px"});
		$("li").css({background:"white"});
		$("li").eq(i).css({background:"red"});
	})
	$("#btn1").click(function(){
		if(i>0){
			i--;
		}else{
			i=5;
		}
		$("#oImg").css({background:"url(img/"+i+".jpg) no-repeat",backgroundSize:"500px 300px"});
		$("li").css({background:"white"});
		$("li").eq(i).css({background:"red"});
	})
</script>

图片效果