您的位置：首页 > Web前端 > JavaScript

js 滚轮事件滚轮焦点图（轮播图）

2015-06-02 13:19 537 查看

利用滚轮，切换轮播图。附带mousewheel插件以及原生js写法；

<!doctypehtml>
<html>
<head>
<metacharset="utf-8">
<metahttp-equiv="X-UA-Compatible"content="IE=8,chrome=1"/>
<metaname="viewport"content="width=1200,user-scalable=yes"/>
<title>滚轮切换图片轮播</title>
<scriptsrc="../js/jquery-1.8.2.min.js"></script>

<scriptsrc="../js/mousewheel.min.js"></script>
</head>
<style>
#focus{width:800px;height:450px;overflow:hidden;position:relative;margin:60pxauto;}
#focusul{margin:0;padding:0;width:800px;height:450px;position:absolute;overflow:hidden;list-style:none;}
#focusulli{float:left;display:inline;list-style:none;}
#focusulliimg{width:800px;height:450px;overflow:hidden;}
#focus.btnBg{position:absolute;width:800px;height:20px;left:0;bottom:0;background:#000;}
#focus.btn{position:absolute;width:780px;height:10px;padding:5px10px;right:0;bottom:5px;text-align:right;}
#focus.btnspan{display:inline-block;_display:inline;_zoom:1;width:25px;height:10px;_font-size:0;margin-left:5px;cursor:pointer;background:#fff;}
#focus.btnspan.on{background:#fff;}
#focus.preNext{width:45px;height:100px;position:absolute;top:170px;background:url(../images/view/spritesss.png)no-repeat#000;cursor:pointer;}
#focus.pre{left:0;}
#focus.next{right:0;background-position:righttop;}
</style>
<bodystyle="height:2000px;">

<divid="focus">
<ul>
<li><a><imgsrc="../images/love5.jpg"></a></li>
<li><a><imgsrc="../images/love3.jpg"></a></li>
<li><a><imgsrc="../images/love4.jpg"></a></li>
<li><a><imgsrc="../images/love1.jpg"></a></li>
</ul>
</div>

<center><buttonid="sasas">观察我</button><p>在轮播图滚轮操时候，body禁止滚轮</p></center>

<script>
$(document).ready(function(e){

var$myfocus=$("#focus"),
sWidth=$myfocus.width(),
len=$("#focusulli").length,
index=0,
picTimer;

//定义动态按钮变量
varbtn="<divclass='btnBg'></div><divclass='btn'>";
for(vari=0;i<len;i++){
btn+="<span></span>";
}
btn+="</div><divclass='preNextpre'></div><divclass='preNextnext'></div>";

$myfocus.append(btn);
$("#focus.btnBg").css('opacity',0.5);

//上一页、下一页按钮透明
$("#focus.preNext").css('opacity',0.2).hover(function(e){
$(this).stop(false,true).animate({"opacity":"0.5"},'slow');
},function(){
$(this).stop().animate({'opacity':0.1},'slow')
});

//为小按钮添加鼠标滑入事件，以显示相应的内容
$("#focus.btnspan").css('opacity',0.5).mouseenter(function(e){
index=$("#focus.btnspan").index(this);
showPics(index);
}).eq(0).trigger("mouseenter");

//上一页按钮
varisClick=true,clickTime=null;//添加开关以及计时器防止过快点击运行2
$myfocus.on("click",".pre",function(e){
//console.log(e.target.tagName+"isclicked，促发了冒泡");
if(isClick){
index-=1;
if(index==-1){index=len-1}
showPics(index);
isClick=false;
}
clearTimeout(clickTime);
clickTime=setTimeout(function(){isClick=true;},300)

});

//下一页按钮
$myfocus.on("click",".next",function(e){
if(isClick){
index+=1;
if(index==len){index=0}
showPics(index);
isClick=false;
}
clearTimeout(clickTime);
clickTime=setTimeout(function(){isClick=true;},300)
});

//鼠标滚轮切换图片轮播利用mousewheel插件的用法//绑定在li上面
//vartimer=null;
//$('#focus').find('li').mousewheel(function(e,delta,deltaX,deltaY){//alert('进入了该方法');//绑定在li上面
//
// if(timer){
// clearInterval(timer);
// }
// varindex=$('#focus').find('li').index(this);
// if(delta>0){//alert('向上上滚动');
// index-=1;
// if(index==-1){index=len-1}
// timer=setTimeout(function(){showPics(index)},30);;
// }else{//alert('鼠标滚轮向下下面滚动');
// index+=1;
// if(index==len){index=0}
// timer=setTimeout(function(){showPics(index)},30);;
// }
// returnfalse;//阻止滚轮事件冒泡检点图里面滚动操作时候，body的滚动条禁止特别注意
//});

//鼠标滚轮切换图片轮播利用mousewheel插件的用法//绑定在$('#focus')上
// varflags=true,durs=navigator.userAgent.indexOf("Firefox")>0?780:300;//火狐的滚轮间隔时间需要长一点不然连续两次一起
//$('#focus').mousewheel(function(e,delta,deltaX,deltaY){//alert('进入了该方法');
// if(flags){
// if(delta>0){//alert('向上上滚动');
// index-=1;
// if(index==-1){index=len-1}
// showPics(index)
// }else{//alert('鼠标滚轮向下下面滚动');
// index+=1;
// if(index==len){index=0}
// showPics(index)
// }
// $('#sasas').html('当滚到的是第'+index);
// clearTimeout(picTimer);
// flags=false;
// setTimeout(function(){flags=!flags;},durs);
//
// }
// returnfalse;//阻止滚轮事件冒泡检点图里面滚动操作时候，body的滚动条禁止特别注意
//});

//原生js方法
//自定义滚轮的公共方法
functionwheel(obj,fn,useCapture){
varmousewheelevt=(/Firefox/i.test(navigator.userAgent))?"DOMMouseScroll":"mousewheel"//FFdoesn'trecognizemousewheelasofFF3.x
if(obj.attachEvent)//ifIE(andOperadependingonusersetting)
obj.attachEvent("on"+mousewheelevt,handler,useCapture);
elseif(obj.addEventListener)//WC3browsers
obj.addEventListener(mousewheelevt,handler,useCapture);

functionhandler(event){
vardelta=0,
event=window.event||event,
delta=event.detail?-event.detail/3:event.wheelDelta/120;
if(event.preventDefault)
event.preventDefault();
event.returnValue=false;
returnfn.apply(obj,[event,delta]);
}
}

varflags=true,tmps=null;
functionrotateimages(delta,e){
varev=e||window.event;
if(flags){
index=(delta<=-1)?index+1:index-1;
index=(index<0)?len-1:(index>len-1)?0:index;

$('#sasas').html('当滚到的是第'+index);

showPics(index)
flags=false;
}
clearTimeout(tmps);
tmps=setTimeout(function(){flags=!flags;},250);

if(window.event){//IE
ev.cancelBubble=true;
}else{//FF
ev.stopPropagation();
}
returnfalse;
}

//原生js调用
wheel($myfocus[0],function(e,delta){rotateimages(delta,e)},false);

//鼠标滑上焦点图时停止自动播放，滑出时开始自动播放
$myfocus.hover(function(e){
clearInterval(picTimer);
},function(){
picTimer=setInterval(function(){
showPics(index);
index++;
if(index==len){index=0;}
},3500);//此0000代表自动播放的间隔，单位：毫秒
}).trigger("mouseleave");

//先计算出外围的宽度
$("#focus").find('ul').css('width',sWidth*len);

functionshowPics(index){//普通切换
varnowLeft=-(index*sWidth);//根据index值计算ul元素的left值
$("#focusul").stop(true,false).animate({"left":nowLeft},300);//通过animate()调整ul元素滚动到计算出的position
$("#focus.btnspan").stop(true,false).animate({"opacity":"0.4"},300).eq(index).stop(true,false).animate({"opacity":"1"},300);//为当前的按钮切换到选中的效果
}

//console.log($('*').length);

});
</script>

</body>
</html>

本文地址：http://www.cnblogs.com/surfaces/

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

js 滚轮事件 滚轮焦点图（轮播图）

利用滚轮，切换轮播图。附带mousewheel插件以及原生js写法；

js 滚轮事件滚轮焦点图（轮播图）