用jquery面向对象实现的简单的图片轮播，还能学习一下闭包哦

 
 
 
 
    


   

       
       

           
• 1

           
• 2

           
• 3

           
• 4

       

       

           
             
           
           
             
           
           
             
           
           
             
           
       

   

   

css文件

 body *{
    margin:0;
    padding:0;
 }
 #show-pictures-in-turn .banner{
        width:500px;
        height:400px;
        position:relative;
        border:1px solid #000;
    }
    #show-pictures-in-turn a.banner_title{
        position:absolute;
        top:370px;
        left:20px;
        color:#fff;
        font-size:17px;
        text-decoration:none;
        z-index:2;
    }
    #show-pictures-in-turn ul{
        width:104px;
        height:20px;
        position:absolute;
        top:350px;
        right:20px;
        z-index:2;
        list-style: none;
    }
    #show-pictures-in-turn ul li{
        float:left;
        width:10px;
        _width:5px;
        height:20px;
        line-height:20px;
        display: inline;
        margin:1px;
        font-size: 14px;
        text-align: center;
        background-color:#6f4f67;
        color:#fff;
        padding:0px 6px;
        border:1px solid #fff;
        cursor:pointer;
    }
    #show-pictures-in-turn ul li.active{
        background-color:#900;
    }
    #show-pictures-in-turn .banner_pic a{
        position:absolute;
        top:0;
        left:0;
    }

js文件

 $(function(){
        //页面初始化
        $('.banner_pic img:eq(0)').css('opacity', '1');
        $('.banner_pic img:gt(0)').css('opacity', '0');
        $('.banner_list li:eq(0)').addClass('active');
        var title=$('.banner_pic img:eq(0)').attr('title');
        $('.banner_title').text(title);
        //图片逐渐消失
        var disappear=function(elem){
          var opacity=100;
          for(var i=0;i<=10;i++){
            opacity=100-i*10;
            elem.css('opacity', opacity);
          }
          return false;
        };
        //图片逐渐显现
        var appear=function(elem){
          var opacity=0;
          for(var i=0;i<=10;i++){
            opacity+=i*10;
            elem.css('opacity', opacity);
          }
          return false;
        };
        var flag=false;
        //自动轮播
        function auto_play(pic_num_current,pic_num_last){
          function process(){
            if(pic_num_current==0&&!flag){
              pic_num_current=1;
              return;
            }
            flag=true;
            disappear($('.banner_pic img:eq('+pic_num_last+')'));  
            appear($('.banner_pic img:eq('+pic_num_current+')'));
            $('.banner_list li').removeClass('active');
            $('.banner_list li:eq('+(pic_num_current)+')').addClass('active');
            var title=$('.banner_pic img:eq('+(pic_num_current)+')').attr('title');
            $('.banner_title').text(title);
            if(pic_num_current!=3){
              pic_num_last=pic_num_current;
              pic_num_current=pic_num_current+1;
            }
            else{
              pic_num_last=pic_num_current;
              pic_num_current=0;
            }
          }
          return process;
        } 
        var result=auto_play(0,0);
        var circulate=setInterval(result,3000);
        $('ul.banner_list li').click(function() {
          clearInterval(circulate);
          flag=true;
          var currrent_num=$(this).text()-1;
          var last_num=$('li.active').text()-1;
          result=auto_play(currrent_num,last_num);
          result();
          circulate=setInterval(result,3000);
        });
    });