海报轮换插件

结构部分

            <div class="banner">
                <ul>
                    <li></li>
                </ul>
            </div>       
　　$('.banner').bannerbox();                     

 

;(function($){
    $(document).ready(function(){
        $.fn.bannerbox = function(options){
            var defaults = {time:5000,color:'#d65f7d'};
            var changes = $.extend(defaults,options);
         var thiswidth = this.width(),indexs = 0;
              this.children().eq(0).attr('id','ulid');
              $('#ulid').children().addClass('imgid');
         var imgnumber = $('#ulid .imgid').length,
              allwidth  = thiswidth*imgnumber;
             this.children().eq(0).width(allwidth);
              $('.imgid').width(thiswidth);
              setInterval(autos,changes.time);
             function autos(){
                 if(indexs==(imgnumber-1)){
                     indexs=-1;
                 }
                 $("#ulid").animate({left:'-'+thiswidth*(indexs+1)+'px'});
                 $("#banner-ico i").eq(indexs+1).css({'background-color':changes.color}).siblings().css({'background-color':"#e3e3e3"});
                     indexs++;
             }
             var    icohtml="<div id='banner-ico' style='position:absolute;bottom:20px;text-align:center;width:100%'></div>";
             var ihtml = '';
             this.append(icohtml);
             for(var i=0;i<imgnumber;i++){
                 if(i==0){
                     ihtml += '<i style="height:4px;width:20px;background-color:'+changes.color+';cursor:pointer;display:inline-block;margin:0px 2px"></i>'
                 }else{
                     ihtml += "<i style='height:4px;width:20px;background-color:#e3e3e3;cursor:pointer;display:inline-block;margin:0px 2px'></i>"
                 }
             }
             $('#banner-ico').html(ihtml);
             $("#banner-ico i").on('click',function(){
                 indexs = $(this).index()-1;
                 $(this).css({'background-color':changes.color}).siblings().css({'background-color':"#e3e3e3"});
                 $("#ulid").animate({left:'-'+thiswidth*(indexs+1)+'px'});
             })
        }
    })
})(jQuery)