jQuery图文幻灯片插件YlSlide

来源:https://www.sucaihuo.com/js/2964.html 2017-09-09 22:17浏览(906) 收藏

一款jQuery图文幻灯片插件YlSlide,有3个页面可供参考设置,同一个页面内可以开启多组轮播内容,图片和文字等参数都可以自由设置。
jQuery图文幻灯片插件YlSlide
分类:图片代码 > 图片轮播 难易:初级
查看演示 下载资源 下载积分: 20 积分

页面的head部分,需引入jQuery库和幻灯片插件,并引入页面的样式文件,启用幻灯片插件并设置好相应参数,代码如下:

<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">
<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>

页面的body部分,只需设置好两个幻灯片容器即可,代码如下:

<div class="Yl-container"></div>	

一页多个切换
<div class="Yl-container2"></div>
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2