jQuery YlSlide幻灯片插件是一款切换效果很棒的图文动画幻灯片切换特效,带索引按钮控制图片文字动画轮播代码。
js代码
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.Yl.Slide.min.js"></script>
<script type="text/javascript">
$(document).ready(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:5000,
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">ALL ABOUT US</div>','<div class="Yl-font1">“成就中国人的事业”是我们亘古不变的使命</div>','<div class="Yl-font2">只为一建提分</div>'],
1:['<div class="Yl-font0">SINCE 2002</div>','<div class="Yl-font1">十五年专注一建教学,行业的佼佼者</div>','<div class="Yl-font2">只为一建提分</div>'],
2:['<div class="Yl-font0">CHANCE FOR YOU</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>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791