轮播图

html代码

<div class="banner-box mb20">
<!--大图列表-->
<ul class="pics-list">
<li><a href="album-detail.html"><img src="img/banner/1.jpg"/></a></li>
<li><a href="album-detail.html"><img src="img/banner/2.jpg"/></a></li>
<li><a href="album-detail.html"><img src="img/banner/3.jpg"/></a></li>
<li><a href="album-detail.html"><img src="img/banner/4.jpg"/></a></li>
<li><a href="album-detail.html"><img src="img/banner/5.jpg"/></a></li>
</ul>
<!--指示点列表-->
<ul class="points-list">
<li class="active">●</li>
<li>●</li>
<li>●</li>
<li>●</li>
<li>●</li>
</ul>
<div class="buts">
<a href="javascript:;" class="prev"></a>
<a href="javascript:;" class="next"></a>
</div>
</div>

css代码

.banner-box{position: relative; height: 389px; width: 1200px; overflow: hidden;}
.pics-list{height: 389px; width: 6000px;position: absolute;left: 1200;}
.pics-list li{float: left;width: 1200px;}
.points-list{position: absolute;left: 50%;bottom: 10px; margin-left: -100px;}
.points-list li{display:inline-block;padding: 0 5px;font-size: 24px;color: #999;
opacity: 0.6;cursor: pointer}
.points-list li.active,.points-list li:hover{color:#ddd;}
.prev,.next{width: 72px;height: 72px;position: absolute;
background: url(../img/icon/banner_arrow.png) no-repeat;top: 155px;}
.prev {left: 0;background-position: -10px 0;}
.prev:hover {background-position: -10px -72px;}
.next {right: -14px;background-position: 0 -144px;}
.next:hover {background-position: 0 -216px;}

jquery代码

<script type="text/javascript">
$(function(){
var current=0;//初始值
var count=$(".pics-list li").length-1;//有几张图
var width=$(".pics-list li").width();//图片的宽度
function next(){
// 当点到最后一张图时，弄到第一张图片
if (current >= count) {
current=0
} else{
current++;
}
// 设置圆点的样式eq（第几个圆点）.addClass(圆点当前的样式).siblings()除这个圆点外的同级所有圆点.removeClass(删除圆点样式)
$(".points-list").eq(current).addClass("active").siblings().removeClass("active")
// 图片的css的样式
$(".pics-list").css("left",-1 * width * current+"px")
}
function prev(){
// 当点到第一张图时，弄到最后一张图片
if (current<=0) {
current=count;
}
else{
current--;
}
$(".points-list li").eq(current).addClass("active").siblings().removeClass("active")
$(".pics-list").css("left",-1 * width * current+"px")
}
// 每个3秒运行next（）方法
setInterval(function(){
next();
},3000)
// 点击next按钮时运行next（）方法
$(".banner-box .next").click(function(){
next();
})
// 点击prev按钮时运行prev（）方法
$(".banner-box .prev").click(function(){
prev();
})
})
</script>