<style>
*{padding:0; margin:0}
li{ list-style:none}
.banner{width:730px; height:454px; border:5px solid #000; margin:50px auto; position:relative}
.banner .pic li{ position:absolute; top:0; left:0; display:none}
.banner .num{ position:absolute; font-size:0; bottom:20px; width:100%; text-align:center}
.banner .num li{width:20px; height:20px; background:#666; font-size:12px; line-height:20px; border-radius:50%; color:#fff; display:inline-block; margin:0px 3px; text-align:center; cursor:pointer}
.banner .num li.active{ background:#a00}
.banner .btn{ height:60px; width:30px; text-align:center; line-height:60px; background:rgba(0,0,0,0.5); color:#ffffff; cursor:pointer; font-size:40px; position:absolute; top:50%; margin-top:-30px; display:none}
.banner:hover .btn{ display:block}
.banner .left{ left:0}
.banner .right{right:0}
</style>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
var size = $(".pic li").size();
for(i=1; i<=size; i++){
var li="<li>"+i+"</li>";
$(".num").append(li);
}
$(".pic li").eq(0).show();
$(".num li").eq(0).addClass("active");
$(".banner li").mouseover(function(){
$(this).addClass("active").siblings().removeClass("active");
var index=$(this).index();
$(".pic li").eq(index).stop().fadeIn(300).siblings().stop().fadeOut(300);
});
var i=0;
var t=setInterval(move,2000);
function moveL(){
i--;
if(i==-1){
i=size-1;
}
$(".num li").eq(i).addClass("active").siblings().removeClass("active");
$(".pic li").eq(i).fadeIn(300).siblings().fadeOut(300);
}
function move(){
i++;
if(i==size){
i=0;
}
$(".num li").eq(i).addClass("active").siblings().removeClass("active");
$(".pic li").eq(i).fadeIn(300).siblings().fadeOut(300);
}
$(".banner .left").click(function(){
moveL();
})
$(".banner .right").click(function(){
move();
})
$(".banner").hover(function(){
clearInterval(t);
},function(){
t=setInterval(move,2000);
})
});
</script>
<div class="banner">
<ul class="pic">
<li><a href=" ">< img src="images/01.jpg" alt="" /></a ></li>
<li><a href="#">
