jQuery大图切换带文字动态效果

所属分类:媒体-幻灯片和轮播图

 5358  49  查看评论 (7)
jQuery大图切换带文字动态效果 ie兼容10

使用方法

引用只需要引用一个css样式表,一个js文件

jquery是一般网页默认都引用的

<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代码

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

sun_banner默认是1920*550   可以从样式表中修改

调用方法

$(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) {						
			//页面切换完成后的回调函数
			
		}
	});	
});
相关插件-幻灯片和轮播图

好玩的蹦床效果轮播图

一个有趣的内容导航效果,使用可拖动的弹性堆栈和Snap.svg动画像蹦床一样的背景形状。
  幻灯片和轮播图
 5021  47

jQuery轮播插件(原创轮播)

代码注释全,方便大家自行修改的轮播插件
  幻灯片和轮播图
 14652  63

基于swiper仿臭美app滑动效果

基于Swiper3.x安卓稍微有点卡仿臭美app滑动效果
  幻灯片和轮播图
 8048  63

jQuery自适应滑块轮播图插件zpSlide

zpSlide滑块集轮播图幻灯片,滑块集轮播图个数可自定义,并完全自适应于手机端、ipad、电脑端
  幻灯片和轮播图
 9333  26

讨论这个项目(7)回答他人问题或分享插件使用方法奖励jQ币

    Eternal 0
    2018/6/25 11:31:51
    尝自己的血 扛自己的梦, 0
    2018/5/22 14:50:22
    Snail 0
    2018/5/16 10:43:42
    0
    2018/5/16 9:15:24
    斗罗大陆 斗破苍穹 国漫崛起!!!
        瓶子0
        2018/5/16 9:43:46
        抱歉 。。我不这么认为 ,国漫还没崛起。感觉很多动漫都是靠段子活着
        SunRoad0
        2018/5/17 15:16:14
        这些小说确实挺好,,,不过拍成动漫感觉有点。。。。
        尝自己的血 扛自己的梦,0
        2018/5/22 14:51:11
        小说挺好的 动漫没看过
    回复
取消回复