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

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

 4258  46  查看评论 (6)
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) {						
			//页面切换完成后的回调函数
			
		}
	});	
});
相关插件-幻灯片和轮播图
  幻灯片和轮播图
 9005  85

淘宝的推荐好物滑动切换展示效果

淘宝推荐好物切换展示应用,淘宝极有家切换效果
  幻灯片和轮播图
 4254  54

点击 放大 焦点图

点击箭头内容放大
  幻灯片和轮播图
 23586  172

jQuery幻灯插件

号称世界最棒的jQuery幻灯插件 16种幻灯变化的特效 简单并且配置灵活 体积小并且符合语义
  幻灯片和轮播图
 13227  75

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

    尝自己的血 扛自己的梦, 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
        小说挺好的 动漫没看过
    回复
取消回复