超级简单的手动轮播图！！！

最新推荐文章于 2024-05-28 19:26:08 发布

michaelmiss

最新推荐文章于 2024-05-28 19:26:08 发布

阅读量3.1k

点赞数 2

本文链接：https://blog.csdn.net/weblhy/article/details/78079280

版权

这是一款简单又易懂的手动轮播代码制作....

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>超级简单轮播图</title>
	<link rel="stylesheet" type="text/css" href="css/banner.css" />
	<script src="js/jquery.min.js"></script>
	<script src="js/banner.js"></script>
</head>
<body>
	<div class="box-nav">
		<ul class="slider-bar">
			<li class="active" slidernum="1"></li>
			<li  slidernum="2"></li>
			<li  slidernum="3"></li>
		</ul>
	</div>
</body>
</html>

* {
	padding:0;
	margin:0;
}
.box-nav {
	background:url(../images/banner1.jpg) no-repeat;
	width:100%;
	height:350px;
}
.box-nav .slider-bar li{
	height:10px;
	width: 10px;
	border-radius: 50%;
	border:2px solid #fff;
	display: inline-block;
	position:relative;
	top:320px;
	left:670px;
}
.box-nav .slider-bar .active {
	background-color:#f8570a;
}

$(function(){

	//找到要点击的li
	$(".slider-bar li").click(function(){

	//找到要点击li的slidernum   attr()获取
	var slidernum=$(this).attr("slidernum");
	console.log(slidernum);

	//给我们找到这个li加上active   
	//sliblings().removeClass()消除被选中元素的同胞元素的样式
	$(this).addClass("active").siblings().removeClass("active");

	// 4.点击第sliderNum那么我们就显示对应的banner2.jpg 
	$(".box-nav").fadeOut("600",function(){
		
		$(this).css({background:"url(./images/banner"+slidernum+".jpg)"}).fadeIn("600");
	})
	
	})
})