JQ 简洁的轮播图
程序员文章站
2022-05-26 19:56:15
...
<!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"><</div>
<div class="prev_next next">></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>
效果图：