2015-06-04jq写的一个小轮播器-优快云博客

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

============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" alt="" /></li>
        <li><img src="images/2.jpg" alt="" /></li>
        <li><img src="images/3.jpg" alt="" /></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;display:none;}

.banner .pic li:first-child{

　　display: block;
}

.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(); }