首页 > 代码库 > 海报轮换插件

海报轮换插件

结构部分

            <div>
                <ul>
                    <li></li>
                </ul>
            </div>                            

 

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

 

海报轮换插件