首页

源码搜藏网

首页 > 网页特效 > 焦点图 >

jQuery鼠标滚轮控制幻灯片切换

创建时间:2014-07-25 08:42  

jQuery鼠标滚轮控制幻灯片切换
jQuery鼠标滚轮控制幻灯片切换
效果预览 立即下载

jQuery鼠标滚轮控制幻灯片切换jQuery鼠标滚轮控制幻灯片切换是一款基于jQuery实现的鼠标滚轮控制幻灯效果。jQuery鼠标滚轮鼠标滚动图片切换

<script type='text/javascript' src="js/jquery.min.js"></script>
<script type='text/javascript' src="js/jquery.mousewheel.js"></script>
<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>

上一篇:jQuery手机焦点图切换特效代码
下一篇:jquery+css3动画幻灯片代码

相关内容

热门推荐