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

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

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

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

1
2
<script src="js/jquery.min.js"></script>
<script src="js/jquery.Yl.Slide.min.js"></script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<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>

文件信息:

    2

    发表评论