鼠标滚轮滑动轮播

最新推荐文章于 2022-09-21 16:47:47 发布

zhugeyangyang1994

最新推荐文章于 2022-09-21 16:47:47 发布

阅读量2.6k

点赞数

分类专栏： javaweb

本文链接：https://blog.csdn.net/zhugeyangyang1994/article/details/50219635

版权

javaweb 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

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

直接贴代码

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");

});
});

zhugeyangyang1994

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
鼠标滚轮滑动轮播

今天无聊做了一个简单的鼠标滚轮轮播直接贴代码html鼠标滚轮滑动轮播body{background:url("/img.jpg");}#msg{padding:20px;}#show{margin-top:30px;padding:10px;background-color:#666;width:30px;
复制链接

扫一扫