这款jQuery图片文字动画切换特效,非常炫酷,用来做网站的横幅banner轮播效果绝佳,中下方还有索引按钮控制切换。
js代码
<script src="js/jquery.Yl.Slide.min.js"></script><script>$(function(){$('.Yl-container').YlSlide({wrapper:'.Yl-wrapper',slideClass:'.Yl-slide',stylePrefix:'.Yl-',slideLength:3,pages:true,pagination:'.Yl-pagination',pagingSelect:'.Yl-pagination-bullet-active',autoplay:25000,imgTemplate:{0:['<div class="Yl-img0"></div>'],1:['<div class="Yl-img1"></div>'],2:['<div class="Yl-img2"></div>']},fontTemplate:{0:['<div class="Yl-font0">一人之下</div>','<div class="Yl-font1">术之尽头,炁体源流</div>','<div class="Yl-font2">国漫崛起</div>'],1:['<div class="Yl-font0">画江湖</div>','<div class="Yl-font1">不良人、侠岚、换世门生、灵主</div>','<div class="Yl-font2">国漫崛起</div>'],2:['<div class="Yl-font0">镇魂街</div>','<div class="Yl-font1">末将于禁 愿为曹家世代赴汤蹈火</div>','<div class="Yl-font2">国漫崛起</div>']},fontAnimationMode:{0:['fadeInUp','fadeInUp','slideInLeft'],1:['fadeInUp','fadeInUp','slideInLeft'],2:['fadeInUp','fadeInUp','slideInLeft']},customTemplate:{0:['<div class="Yl-Button"><a href="javascript:void(0);">查看详情</a></div>'],1:['<div class="Yl-Button"><a href="javascript:void(0);">查看详情</a></div>'],2:['<div class="Yl-Button"><a href="javascript:void(0);">查看详情</a></div>']},callback:function(e){//整个dom加载完成后的回调函数、切换动画前的回调},before: function(e) {//页面切换前的回调函数},after: function(e) {//页面切换完成后的回调函数}});});</script>