轮播图

<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="#">