<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery图片文字幻灯片动画切换代码</title>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.Yl.Slide.min.js"></script>
<link rel="stylesheet" href="css/css.css" type="text/css">
</head>
<body><script src="/demos/googlegg.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">“The achievement of the cause of the Chinese people" is our eternal mission</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) {
//页面切换完成后的回调函数
}
});
$('.Yl-container2').YlSlide({
wrapper:'.Yl-wrapper',
slideClass:'.Yl-slide',
stylePrefix:'.Yl-',
slideLength:4,
pages:true,
pagination:'.Yl-pagination',
pagingSelect:'.Yl-pagination-bullet-active',
autoplay:6000,
imgTemplate:{
0:['<div class="Yl-img0">2</div>'],
1:['<div class="Yl-img1">2</div>'],
2:['<div class="Yl-img2">2</div>'],
3:['<div class="Yl-img1">2</div>']
},
fontTemplate:{
0:['<div class="Yl-font0">ALL ABOUT US2</div>','<div class="Yl-font1">“成就中国人的事业”是我们亘古不变的使命2</div>','<div class="Yl-font2">只为一建提分2</div>'],
1:['<div class="Yl-font0">SINCE 20022</div>','<div class="Yl-font1">十五年专注一建教学,行业的佼佼者2</div>','<div class="Yl-font2">只为一建提分2</div>'],
2:['<div class="Yl-font0">CHANCE FOR YOU2</div>','<div class="Yl-font1">更高效的学习方式,让学员花费更少的时间2</div>','<div class="Yl-font2">只为一建提分2</div>'],
3:['<div class="Yl-font0">CHANCE FOR YOU2</div>','<div class="Yl-font1">更高效的学习方式,让学员花费更少的时间2</div>','<div class="Yl-font2">只为一建提分2</div>']
},
fontAnimationMode:{
0:['fadeInUp','fadeInUp','slideInLeft'],
1:['fadeInUp','fadeInUp','slideInLeft'],
2:['fadeInUp','fadeInUp','slideInLeft'],
3:['fadeInUp','fadeInUp','slideInLeft']
},
customTemplate:{
0:['<div class="Yl-Button"><a href="javascript:void(0);">开启专属你的备考之旅2</a></div>'],
1:['<div class="Yl-Button"><a href="javascript:void(0);">开启专属你的备考之旅2</a></div>'],
2:['<div class="Yl-Button"><a href="javascript:void(0);">开启专属你的备考之旅2</a></div>'],
3:['<div class="Yl-Button"><a href="javascript:void(0);">开启专属你的备考之旅2</a></div>']
},
callback:function(e){
//整个dom加载完成后的回调函数、切换动画前的回调
},
before: function(e) {
//页面切换前的回调函数
},
after: function(e) {
//页面切换完成后的回调函数
}
});
});
</script>
<div class="Yl-container"></div>
<center>一页多个切换</center>
<div class="Yl-container2"></div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器:360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>来源:<a href="http://www.lanrenzhijia.com/" target="_blank">懒人素材</a></p>
</div>
</body>
</html>
没有合适的资源?快使用搜索试试~ 我知道了~
资源推荐
资源详情
资源评论
收起资源包目录
jQuery文字图片幻灯片动画切换效果.zip (7个子文件)
js
jquery.Yl.Slide.min.js 5KB
jquery-1.9.1.min.js 90KB
css
css.css 9KB
index.html 5KB
images
layer3.png 16KB
layer1.png 24KB
layer2.png 13KB
共 7 条
- 1
资源评论
码云笔记
- 粉丝: 2w+
- 资源: 5851
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功