这是使用绝对定位来做
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>轮播图</title>
<style type="text/css">
body,ul,li{margin: 0;padding: 0;}
/*幻灯片*/
.bannerwarp{
width: 100%;
height: 600px;
position: relative;
overflow: hidden;
}
.banner{
width: 100%;
height: 600px;
min-width: 1920px;
left: 50%;
margin-left: -960px;
position: absolute;
}
.banner>ul{
height:600px;
position:absolute;
}
.banner>ul li{
float:left;
min-width:1920px;
height:600px;
overflow:hidden;
position:relative;
}
.banner>ul li a{
display: block;
}
.bannerbtn{
position: absolute;
bottom: 10px;
left: 0px;
right: 0px;
text-align: center;
}
.bannerbtn span{
display: inline-block;
_display: inline;
_zoom: 1;
width: 15px;
height: 15px;
_font-size: 0;
margin:2px 8px;
cursor: pointer;
border-radius: 50%;
background: #ECE6E6;
box-shadow: 1px 4px 16px #C0BDBD;
}
.bannerbtn span.on{
width: 17px;
height: 17px;
background-color: #688C1C;
box-shadow: 1px 4px 16px #C0BDBD;
}
</style>
</head>
<body>
<div class="bannerwarp">
<div class="banner">
<ul>
<li><a href="#"><img src="http://img1.sinopromise.com/941in2/ad/1608/57a8283e50e80.jpg"></a></li>
<li><a href="#"><img src="http://img1.sinopromise.com/941in2/ad/1608/57a8288bd5172.jpg"></a></li>
<li><a href="#"><img src="http://img1.sinopromise.com/941in2/ad/1608/57a83e0cbcb2b.jpg"></a></li>
</ul>
</div>
</div>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var sWidth = $(".banner").width(); //获取焦点图的宽度(显示面积)
var len = $(".banner ul li").length; //获取焦点图个数
var index = 0;
var picTimer;
//以下代码添加数字按钮和按钮后的半透明条,还有上一页、下一页两个按钮
var btn = "<div class='bannerbtn'>";
for(var i=0; i < len; i++) {
btn += "<span></span>";
}
btn += "</div>";
$(".bannerwarp ").append(btn);
//为小按钮添加鼠标滑入事件,以显示相应的内容
$(".bannerbtn span").mouseenter(function() {
index = $(".bannerbtn span").index(this);
showPics(index);
}).eq(0).trigger("mouseenter");
//鼠标滑上焦点图时停止自动播放,滑出时开始自动播放
$(".banner").hover(function() {
clearInterval(picTimer);
},function() {
picTimer = setInterval(function() {
showPics(index);
index++;
if(index == len) {index = 0;}
},3000); //此4000代表自动播放的间隔,单位:毫秒
}).trigger("mouseleave");
$(" .banner ul").css("width",len* sWidth);
//显示图片函数,根据接收的index值显示相应的内容
function showPics(index) { //普通切换
var moveLen = -index *sWidth;
$(".banner ul").stop(true,false).animate({left:moveLen},300);
//通过animate()调整ul元素滚动到计算出的position
$(".bannerbtn span").removeClass("on").eq(index).addClass("on");
//为当前的按钮切换到选中的
$(".bannerbtn span").stop(true,false).animate({"opacity":"1"},300).eq(index).stop(true,false).animate({"opacity":"1"},300);
//为当前的按钮切换到选中的效果
}
});
</script>
</body>
</html>