利用jQuery实现鼠标滚轮控制幻灯片切换



30 118 40



特效描述:利用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

加群请备注:从官网了解到