JQ 简洁的轮播图

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" href="base.css" />
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<style>
.banner {
	width: 980px;
	margin: 0 auto;
	position: relative;
}
.banner,.banner .bn_box li {
	height: 310px;
}
.bn_box {
	position: relative;
}
.bn_box li {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
}
.banner .b1 {
	background: url(img/banner1.jpg) 0 -45px no-repeat;
}
.banner .b2 {
	background: url(img/banner2.jpg) 0 -45px no-repeat;
}
.banner .b3 {
	background: url(img/banner3.jpg) 0 -45px no-repeat;
}
.banner .bn_box a {
	display: block;
	height: 45px;
	margin: 205px 0 0 30px;
	width: 235px;
}
.banner ul.bn_tab {
	height: 25px;
	position: absolute;
	bottom: 10px;
	z-index: 100;
	left: 0;
	width: 960px;
	text-align: center;
}
.banner .bn_tab li {
	margin: 0 5px;
	display: inline-block;
	*display: inline;
}
.banner .bn_tab li a {
	width: 10px;
	height: 0;
	padding-top: 10px;
	overflow: hidden;
	display: block;
	border: 1px solid #a9a9ab;
	color: #e0e1e3;
	background: #e0e1e3;
	border-radius: 15px;
}
.banner .bn_tab li a:hover {
	border: 1px solid #979797;
	background: #c7c7c7;
}
.banner .bn_tab li.current a {
	border: 1px solid #4794ba;
	background: #3eaee6
}
.banner .prev_next {
	font-size: 20px;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-top: -10px;
	color: #fff;
	cursor: pointer;
}
.banner .prev {
	margin-left: -480px;
}
.banner .next {
	margin-left: 450px;
}
</style>
</head>

<body>
<div class="banner" id="banner">
	<ul class="bn_box">
		<li class="b1">
			<a href="###"></a>
		</li>
		<li class="b2" style="display:none;">
			<a href="###"></a>
		</li>
		<li class="b3" style="display:none;">
			<a href="###" target="_blank"></a>
		</li>
	</ul>
	<ul class="bn_tab">
		<li class="current">
			<a></a>
		</li>
		<li>
			<a></a>
		</li>
		<li>
			<a></a>
		</li>
	</ul>
	<div class="prev_next prev">&lt;</div>
	<div class="prev_next next">&gt;</div>
</div>
<script>
var bn = $("#banner");
var bn_pic = $(".bn_box li", bn);
var len = bn_pic.length;
var bn_tab = $(".bn_tab li", bn);
var prev = $(".prev", bn);
var next = $(".next", bn);

function tab(i, j) {
	bn_pic.eq(j).fadeOut(1000);
	bn_tab.eq(j).attr("class", "");
	bn_pic.eq(i).fadeIn(1000);
	bn_tab.eq(i).attr("class", "current");
}
bn_tab.click(function() {
	var i = bn_tab.index(this);
	var j = bn_tab.index($('#banner .current:eq(0)'));
	if(i != j) {
		tab(i, j);
	}
});

function auto() {
	var j = bn_tab.index($('#banner .current:eq(0)'));
	var i = (j + 1) % len;
	tab(i, j);
}
prev.click(function() {
	var j = bn_tab.index($('#banner .current:eq(0)'));
	var i = (j - 1) % len;
	tab(i, j);
	//alert("dd");
});
next.click(function() {
	var j = bn_tab.index($('#banner .current:eq(0)'));
	var i = (j + 1) % len;
	tab(i, j);
});
//定时切换
var settime = window.setInterval(auto, 5000);
bn_pic.mouseover(function() {
	window.clearInterval(settime);
});
bn_pic.mouseout(function() {
	settime = window.setInterval(auto, 5000);
});
</script>
</body>
</html>
效果图：
猜你喜欢
