jquery轮播图实例

*{margin: 0;padding: 0;}
body{font-family: " Microsoft YaHei";}
.main{margin:30px auto;width:1200px;text-align: center;}
h3{text-align: center;width:1200px;position: relative;}
/*banner图*/
.banner{width:1200px; height:460px;overflow: hidden;margin-top: 30px;position: relative;border: 10px solid #bbb; }
.banner img{vertical-align: bottom;position: absolute;top: 0;left: 0;/*display: none;*/}
/*.banner img.slide-active{display: block;}*/
/*切换按钮*/
.button{position: absolute;width:40px;height:80px;left:0;top:50%;margin-top:-40px;}
.prev{background:url(../img/pre2.png) no-repeat center center;}
.next{left: auto;right: 0;background:url(../img/pre.png) no-repeat center center;}
.button:hover{background-color: #333;opacity: 0.6;filter: alpha(60);}
/*切换小圆点*/
.dots{position: absolute;right: 0;bottom: 20px;text-align: right;margin-right: 20px;}
.dots span{display: inline-block;width: 12px;height: 12px;border-radius: 50%;line-height:12px;background-color: rgba(7,17,27,0.4);box-shadow:0 0 0 2px rgba(255,255,255,0.9) inset;margin-right: 8px;cursor: pointer;}
.dots span.active{box-shadow: 0 0 0 2px rgba(7,17,27,0.4) inset;background-color: #fff;}

$(document).ready(function(){
    var t,count,
        index=0,
        len=$(".banner img").length;
        
    //  初始化状态，在第一张
    $(".banner img:not(:first-child)").hide();
    $(".dots span:first-child").addClass("active");
   
   // 滑过鼠标清除定时器,滑开继续
    $(".banner").hover(function(){
        clearInterval(t);
    },
    function(){
        t=setInterval(showAuto, 2000);
    });

    //点击小圆点跳转到相应页面并且小圆点样式随之改变
    $(".dots span").click(function(){
      count=$(this).index();//获取当前点击对象的id属性值
      changOption(count);
    });

    //清除定时器
    if(t){
        clearInterval(t);
        t=null;
    }

    // 每隔两秒自动轮播
    t=setInterval(showAuto, 2000);

    //点击按钮切换
    $(".prev").click(function(){
        count=$(".active").index();
        count--;
        if(count <0){count=len-1;}
        changOption(count);     
    });
    $(".next").click(function(){
        count=$(".active").index();
        count++;
        if(count > len-1){count=0;}
        changOption(count);
    });

// 封装自动切换的showAuto函数
function showAuto(){
        index++;
        if(index > len-1){index=0;}
    changOption(index);
}

//封装点击小圆点改变背景及自身样式的changeOption()函数
function changOption(curIndex){
   $(".dots span").siblings().removeClass("active");//查找其他子节点并移除类
   $(".dots span").eq(curIndex).addClass("active");//给当前点击的对象添加类
   $(".banner img").filter(":visible").hide().parent().children().eq(curIndex).show();
   index=curIndex;
}

});