用JQuery实现全屏banner

最新推荐文章于 2024-05-09 09:36:38 发布

webnoob

最新推荐文章于 2024-05-09 09:36:38 发布

阅读量2.3k

点赞数

分类专栏： JS/Node

本文链接：https://blog.csdn.net/Szu_AKer/article/details/50907055

版权

JS/Node 专栏收录该内容

35 篇文章 1 订阅

订阅专栏

1.全屏banner图片的宽度要设置成1920px，以便满足基本pc的横向的宽度。

2.banner父容器的宽度要用relative，子元素用absolute进行定位。

3.要使大图片从中间开始显示，这样就不会显得不对称。

4.若图片是作为div的背景的使用的话，设置下背景的位置为top center，以达到从中间开始显示。

5.如果图片是放在链接里面的话，需要设置链接显示为块元素，把图片最为链接的背景。

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jquery图片轮播</title>
	<link rel="stylesheet" type="text/css" href="../css/mystyle.css">
	<script type="text/javascript" src="../js/jquery-2.2.1.min.js"></script>
	<script src="../js/test.js"></script>
</head>
<body>
	<div class="banner">
		<div class="banner-list"  style="background: url('../img/html5.png') top center no-repeat" ></div>
		<div class="banner-list"  style="background: url('../img/css3.jpg') top center no-repeat" ></div>
		<div class="banner-list"  style="background: url('../img/js.jpg') top center no-repeat" ></div>
		<div class="banner-list"  style="background: url('../img/jq.jpg') top center no-repeat" ></div>
		<ul class="btn">
			<li dl="1" class="hov"></li>
			<li dl="2"></li>
			<li dl="3"></li>
			<li dl="4"></li>
		</ul>
		<div style="clear: both;"></div>
	</div>
</body>
</html>

css代码：

*{
	padding: 0px;
	margin: 0px;
}
ul li{ list-style: none; }

.banner{ position: relative;width: 100%;height: 600px;overflow: hidden; margin:50px auto;}
.banner-list{
	position: absolute;
	top:0px;
	left: 0px;
	width: 100%;
	height: 600px;
}
.btn{
	position: absolute;
	bottom:10px;
	left: 45%;
	display: inline-block;
	padding: 5px 10px;
}
.btn li{
	display: block;
	float: left;
	height: 10px;
	width: 10px;
	border-radius: 50%;
	background-color: #ddd;
	margin: 0 5px;
}
.btn li.hov{
	background-color: #000;
}

JQ代码：

	$(document).ready(function() {
		
		var count=0;
		var t=null;
		$(".banner .banner-list").eq(0).show().siblings("div").hide();
		$(".banner .btn li").click(function(){
			count=$(this).index();
			$(this).addClass("hov").siblings("li").removeClass("hov");
			$(".banner .banner-list").eq(count).fadeIn(1000).siblings("div").fadeOut(1000);
		})
		$(".banner").mouseover(function() {
			/* Act on the event */
			clearInterval(t);
		}).mouseout(function() {
			/* Act on the event */
			autoPlay();
		});

		autoPlay();
		function autoPlay(){
			t=setInterval(function(){
				count++;
				if(count<4){
					$(".banner .btn li").eq(count).addClass("hov").siblings().removeClass("hov");
					$(".banner .banner-list").eq(count).fadeIn(1000).siblings("div").fadeOut(500);
				}
				else
				{
					count=-1;
				};
			},3000);
		};
	});

webnoob

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
用JQuery实现全屏banner

1.全屏banner图片的宽度要设置成1920px，以便满足基本pc的横向的宽度。2.banner父容器的宽度要用relative，子元素用absolute进行定位。3.要使大图片从中间开始显示，这样就不会显得不对称。4.若图片是作为div的背景的使用的话，设置下背景的位置为top center，以达到从中间开始显示。5.如果图片是放在链接里面的话，需要设置链接显示为块元素，把图片最为链接的背景。...
复制链接

扫一扫