鼠标滚轮滑动轮播

来源：互联网发布：国内室内滑雪场知乎编辑：程序博客网时间：2024/05/17 23:44

今天无聊做了一个简单的鼠标滚轮轮播

直接贴代码

html

<html>

<head>
<title>鼠标滚轮滑动轮播</title>
<script type="text/javascript" src="js/jquery-2.1.4.js"></script>
<script type="text/javascript" src="js/base/mousewheel.js"></script>

<style>
body{
background:url("/img.jpg");
}
#msg{
padding:20px;
}
#show{
margin-top:30px;
padding:10px;
background-color:#666;
width:30px;
}
</style>
</head>

<body>

<div id="show">
<div class="show"><a title="/img.jpg" href="#">1</a></div>
<div class="show"><a title="/img1.jpg" href="#">2</a></div>
<div class="show"><a title="/img2.jpg" href="#">3</a></div>
<div class="show"><a title="/img1.jpg" href="#">4</a></div>
</div>

<div class="msg" id="/img.jpg"></div>
<div class="msg" id="/img1.jpg"></div>
<div class="msg" id="/img2.jpg"></div>
<div class="msg" id="/img1.jpg"></div>

</body>

</html>

js 需要导入两个js 下面是其中一个

（

）

// jquery 兼容的滚轮事件
$(function(){
i=0;

$(document).on("mousewheel DOMMouseScroll", function (e) {

var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) || // chrome & ie
(e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1)); // firefox

if (delta > 0) {
// 向上滚
$(function(){
i--;
if(i<=0){
i=0;
}
$("body").css("background","url('"+$(".msg").eq(i).attr("id")+"')");

for(var j=0;j<$(".show").length;j++){
$("#show a").eq(j).css("background-color","#666");
}
$("#show a").eq(i).css("background-color","#999");

})

} else if (delta < 0) {
// 向下滚

i++;

if(i>$(".msg").length-1){
i=0;
}

$("body").css("background","url('"+$(".msg").eq(i).attr("id")+"')");

for(var j=0;j<$(".show").length;j++){
$("#show a").eq(j).css("background-color","#666");
}
$("#show a").eq(i).css("background-color","#999");
// alert($(".msg").eq(i).attr("id"));

}
});
$("#show a").bind("click",function(){
$("body").css("background","url('"+$(this).attr('title')+"')");
for(var j=0;j<$(".show").length;j++){
$("#show a").eq(j).css("background-color","#666");
}
$(this).css("background-color","#999");

});
});

0 0