jQuery图片文字动画切换特效 文字和图片单独修改

92模板   2020-07-27   收藏本文
这是一款jQuery图片文字动画切换特效,文字和图片支持单独修改,非常炫酷的切换特效,用来做网站的横幅banner轮播效果绝佳,中下方还有索引按钮控制切换。

这款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>

jQuery图片文字动画切换特效 文字和图片单独修改

演示地址 下载地址A 下载地址B

相关特效

    暂无数据
免责声明:本站模板均来自用户分享和网络收集,仅供学习与参考,请勿用于商业用途,若损害您的权利,请联系网站客服,核实后立即删除。
展开