20150604jq写的一个小轮播器

图片替换掉即可，图片大小在样式里设置

============html====================
<div class="banner">
    <div class="left"><span class="prev">←</span></div>
    <div class="right"><span class="next">→</span></div>
    <ul class=‘pic‘>
        <li class=‘active‘><img src="images/1.jpg"  /></li>
        <li><img src="images/2.jpg"  /></li>
        <li><img src="images/3.jpg"  /></li>
    </ul>
    <ul class="number">
        <li class=‘first‘></li>
        <li></li>
        <li></li>
    </ul>
</div>
===============css====================
*{margin: 0;padding: 0;}
ul{list-style:none;}
.banner{z-index: 1;position: relative;width: 500px;height: 200px;border: 1px solid #000;margin: 0 auto;}
.banner .left,.banner .right{width: 50px;height: 200px;position: relative;cursor:pointer;z-index: 3;}
.left{float: left;}
.right{float: right;}
.banner .prev{position: absolute;left: 0;top: 90px;z-index: 3;opacity:0;}
.banner .next{position: absolute;right: 0;top: 90px;z-index: 3;opacity:0;}
.banner .pic li{position: absolute;top: 0;left: 0;z-index: 1;}
.banner .pic li.active{z-index: 2;}
.banner .number{z-index: 3;position: absolute;bottom: 0;left: 200px;width:80px;height: 12px;line-height: 12px;}
.banner .number li{cursor:pointer;width: 10px;height: 10px;border: 1px solid #333;float: left;margin-left: 10px;-webkit-border-radius:50% ;-moz-border-radius:50%;border-radius:50%;}
.banner .number li.first{background: red;}
===============js====================
//设置索引值和初始化计时器
var index=0,timer=null;
//给左右两个箭头做移入移出的效果
$(‘.banner .left‘).hover(function () {
    $(‘.prev‘).animate({‘opacity‘:‘1‘},300)
},function () {
    $(‘.prev‘).animate({‘opacity‘:‘0‘},300)
})
$(‘.banner .right‘).hover(function () {
    $(‘.next‘).animate({‘opacity‘:‘1‘},300)
},function () {
    $(‘.next‘).animate({‘opacity‘:‘0‘},300)
})
//手动点击三个按钮的轮播器
$(‘.number li‘).click(function () {
    index=$(this).index();
    move(index);
})
//手动点击向前和向后的轮播器
$(‘.banner .prev‘).click(function () {
    (index>0)?index--:index=2
    move(index)
})
$(‘.banner .next‘).click(function () {
    (index<2)?index++:index=0;
    move(index);
})
//设置自动轮播器
function loop() {
    (index<2)?index++:index=0;
    move(index);
}
timer=setInterval(loop,2000);
//移入移出prev和next，还有三个小圆点对自动轮播器的开启和关闭
$(‘.banner .left‘).hover(function () {
    clearInterval(timer);
},function () {
    timer=setInterval(loop,2000);
})
$(‘.banner .right‘).hover(function () {
    clearInterval(timer);
},function () {
    timer=setInterval(loop,2000);
})
$(‘.number li‘).hover(function () {
    clearInterval(timer);
},function () {
    timer=setInterval(loop,2000);
})
//轮播器运动框架
function move(index) {
    $(‘.number li‘).removeClass(‘first‘);
    $(‘.number li‘).eq(index).addClass(‘first‘)
    $(‘.pic li‘).fadeOut();
    $(‘.pic li‘).eq(index).fadeIn();
}