首页 > 代码库 > 海报轮换插件
海报轮换插件
结构部分
<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)
海报轮换插件
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。