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

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

 33640  414  查看评论 (20)
分享到微信朋友圈
X
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) {						
			//页面切换完成后的回调函数
			
		}
	});	
});
相关插件-幻灯片和轮播图

仿酷狗轮播图超炫酷效果

将轮播图进行简易的封装能够很好的复用以及修改
  幻灯片和轮播图
 34817  329

jQuery无缝滚动轮播图(原创)

各大网站常用的轮播图滚动效果,自动轮播,左右按钮切换
  幻灯片和轮播图
 20882  201

响应式banner,带手指换的特效,自定义设置属性

响应式banner,支持移动端手指滑动切换,自定义设置属性
  幻灯片和轮播图
 52923  514

jQuery轮播图加时间轴插件

jQuery轮播图加时间轴插件,简单实用。
  幻灯片和轮播图
 30879  414

讨论这个项目(20)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    James 0
    2019/9/17 16:07:29
    如果每张轮播的动画可以不同就更完美了,就像幻灯片一样 回复
    21321312 0
    2019/2/18 15:00:41
    ONCE 0
    2019/1/12 12:53:29
    自我感觉挺实用的!!!
    强力推荐哦!!! 回复
    戏子~ 0
    2018/10/28 16:32:53
    挺好用的
        ONCE0
        2019/1/12 12:54:09
        确定,同意!
    回复
    圣光会哇哦你 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
        2020/6/24 14:24:52
        确实,我也觉得
    回复
    小时候特厉害 0
    2018/7/20 16:40:05
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复