jquery图片配文字动态切换特效代码

简要教程

这是一款jQuery图片切换插件制作图片放大、文字动态切换轮播代码。

使用方法

在页面引入以下jquery.min.js、jquery.Yl.Slide.min.js文件

<script src="js/jquery.min.js"></script>
<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>