利用滚轮，切换轮播图。附带mousewheel插件以及原生js写法；
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=8,chrome=1" />
<meta name="viewport" content="width=1200,user-scalable=yes" />
<title>滚轮切换图片轮播</title>
<script src="../js/jquery-1.8.2.min.js"></script>
<!--<script type="text/javascript" src="https://raw.githubusercontent.com/brandonaaron/jquery-mousewheel/master/jquery.mousewheel.min.js"></script>-->
<script src="../js/mousewheel.min.js"></script>
</head>
<style>
#focus{width:800px; height:450px; overflow:hidden; position:relative; margin:60px auto;}
#focus ul{margin:0; padding:0;width:800px;height:450px; position:absolute; overflow:hidden;list-style:none;}
#focus ul li{ float:left; display:inline;list-style:none;}
#focus ul li img{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:5px 10px; right:0; bottom:5px; text-align:right;}
#focus .btn span {display:inline-block; _display:inline; _zoom:1; width:25px; height:10px; _font-size:0; margin-left:5px; cursor:pointer; background:#fff;}
#focus .btn span.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:right top;}
</style>
<body style="height:2000px;">
<div id="focus" >
<ul >
<li><a><img src="../images/love5.jpg"></a></li>
<li><a><img src="../images/love3.jpg"></a></li>
<li><a><img src="../images/love4.jpg"></a></li>
<li><a><img src="../images/love1.jpg"></a></li>
</ul>
</div>
<center><button id="sasas">观察我</button><p>在轮播图滚轮操时候，body禁止滚轮</p></center>
<script>
$(document).ready(function(e) {
var $myfocus=$("#focus"),
sWidth=$myfocus.width(),
len=$("#focus ul li").length,
index=0,
picTimer;
// 定义动态按钮 变量
var btn="<div class=‘btnBg‘></div><div class=‘btn‘>";
for(var i=0;i<len;i++){
btn += "<span></span>";
}
btn += "</div> <div class=‘preNext pre‘></div><div class=‘preNext next‘></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 .btn span").css(‘opacity‘,0.5).mouseenter(function(e){
index=$("#focus .btn span").index(this);
showPics(index);
}).eq(0).trigger("mouseenter");
//上一页按钮
var isClick=true,clickTime=null; //添加开关以及计时器 防止过快点击 运行2
$myfocus.on("click",".pre",function(e){
//console.log(e.target.tagName+"is clicked，促发了冒泡");
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 上面
//var timer=null;
// $(‘#focus‘).find(‘li‘).mousewheel(function(e, delta,deltaX,deltaY) { //alert(‘进入了该方法‘); //绑定在li 上面
//
// if(timer){
// clearInterval(timer);
// }
// var index=$(‘#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 );;
// }
// return false; //阻止滚轮事件冒泡 检点图里面滚动操作时候，body的滚动条禁止 特别注意
// });
//鼠标滚轮切换图片轮播 利用 mousewheel插件的用法 //绑定在 $(‘#focus‘)上
// var flags=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);
//
// }
// return false; //阻止滚轮事件冒泡 检点图里面滚动操作时候，body的滚动条禁止 特别注意
// });
//原生js方法
//自定义滚轮的公共方法
function wheel(obj, fn ,useCapture){
var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel" //FF doesn‘t recognize mousewheel as of FF3.x
if (obj.attachEvent) //if IE (and Opera depending on user setting)
obj.attachEvent("on"+mousewheelevt, handler, useCapture);
else if (obj.addEventListener) //WC3 browsers
obj.addEventListener(mousewheelevt, handler, useCapture);
function handler(event) {
var delta = 0,
event = window.event || event ,
delta = event.detail ? -event.detail/3 : event.wheelDelta/120;
if (event.preventDefault)
event.preventDefault();
event.returnValue = false;
return fn.apply(obj, [event, delta]);
}
}
var flags=true,tmps=null;
function rotateimages(delta,e){
var ev=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();
}
return false;
}
//原生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);
function showPics(index) { //普通切换
var nowLeft = -(index*sWidth); //根据index值计算ul元素的left值
$("#focus ul").stop(true,false).animate({"left":nowLeft},300); //通过animate()调整ul元素滚动到计算出的position
$("#focus .btn span").stop(true,false).animate({"opacity":"0.4"},300).eq(index).stop(true,false).animate({"opacity":"1"},300); //为当前的按钮切换到选中的效果
}
//console.log( $(‘*‘).length );
});
</script>
</body>
</html>
时间： 2024-10-11 23:21:12