jquery左右圖片切換鼠標滾動左右圖片滾動切換代碼



147 585 196



特效描述:左右圖片切換 鼠標滾動 左右圖片滾動 滾動切換,jquery左右圖片切換

代碼結構

1. 引入CSS

<link rel="stylesheet" href="css/page.css" />
<link rel="stylesheet" href="css/jquery.multiscroll.css" />

2. 引入JS

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery.easings.min.js"></script>
<script type="text/javascript" src="js/jquery.multiscroll.min.js"></script>

3. HTML代碼

<div id="header">頭部</div>
<div id="multiscroll">
	<div class="ms-left">
		<div class="ms-section">左1</div>
		<div class="ms-section active">左2</div>
		<div class="ms-section">左3</div>
	</div>
	<div class="ms-right">
		<div class="ms-section">右1</div>
		<div class="ms-section active">右2</div>
		<div class="ms-section">右3</div>
	</div>
</div>
<div id="footer">底部</div>
<script type="text/javascript">
$(function(){
	$('#multiscroll').multiscroll({
		sectionsColor:['#1bbc9b', '#de564b', '#f9b755'] ,
		loopTop:true ,
		loopBottom:true ,
		navigation:true ,
		navigationTooltips:['page1','page2','page3'],
		easing: 'easeOutBack' ,
		paddingTop:'70px' ,
		paddingBottom:'70px',
		afterRender: function(){
			//alert('初始化完成') ;
		},
		afterResize:function(){
			//alert('瀏覽器窗口大小調整了') ;
		},
		onLeave:function(){
			//alert('開始滾動') ;
		},
		afterLoad:function(){
			//alert('滾動完成') ;
		}
	});
});
</script>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滾動 滾動條 頁面滾動 滾動插件 滾動條插件 滾動條美化 自動滾動圖片輪播 滾動切換 滾動條切換 圖片滾動 圖片滾動條
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

湖北30选5开奖结果走势图表