利用jQuery實現鼠標滾輪控制幻燈片切換



33 131 44



特效描述:利用jQuery實現 鼠標滾輪 幻燈片切換,利用jQuery實現鼠標滾輪控制幻燈片切換

代碼結構

1. 引入JS

<script type='text/javascript' src="js/jquery.min.js"></script>
<script type='text/javascript' src="js/jquery.mousewheel.js"></script>

2. HTML代碼

<div align="center" style="width:416px; margin:0 auto">
		<div id="sliders">
		<div class="slider red">鼠標滾輪控制幻燈效果1</div>
		<div class="slider orange">鼠標滾輪控制幻燈效果2</div>
		<div class="slider black">鼠標滾輪控制幻燈效果3</div>
		<div class="slider blue">鼠標滾輪控制幻燈效果4</div>
		<div class="slider purple">鼠標滾輪控制幻燈效果5</div>
		</div></div>
		<script type='text/javascript'>
			$(function(){
			  $('.slider').first().addClass('showit');
			  $('#sliders').on('mousewheel', function(event) {
				var $showitem = $('#sliders').find('.showit');
				if(event.deltaY>0){
					if($showitem.prev().length){
						$showitem.prev().addClass('showit').siblings().removeClass('showit');
					}else{
						$('.slider').last().addClass('showit').siblings().removeClass('showit');
					}
				}else{
					if($showitem.next().length){
						$showitem.next().addClass('showit').siblings().removeClass('showit');
					}else{
						$('.slider').first().addClass('showit').siblings().removeClass('showit');
					}
				}
				console.log(event.deltaX, event.deltaY, event.deltaFactor);
			  });
			});
		</script>



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


熱門標簽: 滾動切換 滾動條切換 滑動選項卡 滑動切換 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 圖片切換 圖片選項卡 圖標選項卡
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

老夫子电子