Connect_logo_6.png 退出
前端視頻教程 小程序 眾籌源碼 python 商城源碼 商城模板 響應式模板 中文模板 手機模板 企業源碼
充值

非常炫酷的jQuery圖片文字動畫切換特效

作者/代碼整理:  (轉載請附加本文地址,帶有“懶人原生”字樣的謝絕轉載) 發布日期:2018-05-18
非常炫酷的jQuery圖片文字動畫切換特效,用來做網站的橫幅banner輪播效果絕佳,中下方還有索引按鈕控制切換。


js代碼

<script src="js/jquery.Yl.Slide.min.js"></script>
<script>
$(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) {						
			//頁面切換完成后的回調函數
			
		}
	});	
});
</script>

极速快三全天人工计划