演示网站 jQuery大图切换带文字动态效果
使用方法
引用只需要引用一个css样式表，一个js文件
jquery是一般网页默认都引用的
|
1
2
3
|
<link rel="stylesheet" href="resources/css/YlSidler.css"><script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script><script src="resources/js/jquery.Yl.Slide.min.js"></script> |
html代码
|
1
2
3
|
<div class="sun_banner"> <div class="Yl-container"></div> </div> |
sun_banner默认是1920*550 可以从样式表中修改
调用方法
|
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
|
$(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) { //页面切换完成后的回调函数 } }); }); |
注册免费下载
抱歉，隐藏内容须成功 评论本文 后刷新可见！
