非常炫酷的jQuery图片文字动画切换特效，用来做网站的横幅banner轮播效果绝佳，中下方还有索引按钮控制切换。
js代码
<scriptsrc="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:['<divclass="Yl-img0"></div>'],
1:['<divclass="Yl-img1"></div>'],
2:['<divclass="Yl-img2"></div>']
},
fontTemplate:{
0:['<divclass="Yl-font0">一人之下</div>','<divclass="Yl-font1">术之尽头，炁体源流</div>','<divclass="Yl-font2">国漫崛起</div>'],
1:['<divclass="Yl-font0">画江湖</div>','<divclass="Yl-font1">不良人、侠岚、换世门生、灵主</div>','<divclass="Yl-font2">国漫崛起</div>'],
2:['<divclass="Yl-font0">镇魂街</div>','<divclass="Yl-font1">末将于禁愿为曹家世代赴汤蹈火</div>','<divclass="Yl-font2">国漫崛起</div>']
},
fontAnimationMode:{
0:['fadeInUp','fadeInUp','slideInLeft'],
1:['fadeInUp','fadeInUp','slideInLeft'],
2:['fadeInUp','fadeInUp','slideInLeft']
},
customTemplate:{
0:['<divclass="Yl-Button"><ahref="javascript:void(0);">查看详情</a></div>'],
1:['<divclass="Yl-Button"><ahref="javascript:void(0);">查看详情</a></div>'],
2:['<divclass="Yl-Button"><ahref="javascript:void(0);">查看详情</a></div>']
},
callback:function(e){
//整个dom加载完成后的回调函数、切换动画前的回调
},
before:function(e){
//页面切换前的回调函数
},
after:function(e){
//页面切换完成后的回调函数
}
});
});
</script>
下载
|
|
置顶卡
变色卡