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

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

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

jquery焦点图轮播插件excoloSlider

jquery焦点图轮播插件excoloSlider,支持拖拽
  幻灯片和轮播图
 15417  23

jQuery径向SVG滑块轮播

简单反应迅速的滑块,与采用 SVG clipPath 和遮罩元素径向过渡效果。
  幻灯片和轮播图
 7671  81

原声 JS + Jquery + 面向对象轮播图

几个效果的轮播图,最后组成个组件效果,可供学习
  幻灯片和轮播图
 21870  95

jquery旋转轮播插件

jquery简单实用幻灯片轮播插件
  幻灯片和轮播图
 10359  34

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

    圣光会哇哦你 0
    2018/10/16 15:41:34
    一人之下真的很棒!!我不认为一人之下这种动漫是靠段子活着 回复
    雪风丶 0
    2018/10/9 14:18:12
    服软. 0
    2018/9/16 4:04:55
    这个轮播是真帅 回复
    三月的不羁少年 0
    2018/9/2 20:02:02
    作者哥哥,我的照片比你的大,显示不全咋办
    回复
    douzi928 0
    2018/7/27 10:07:24
    小时候特厉害 0
    2018/7/20 16:40:05
    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
        小说挺好的 动漫没看过
        HHHHHHhhㄉ0
        2018/7/29 21:12:10
        小说真心很赞,我去看了看动漫,可以说是完全毁了,开头5分钟就可以感觉到了,哎
    回复
取消回复
  短信接口