JavaScript代码制作页面鼠标滚轮图片切换

最新推荐文章于 2021-05-31 10:52:14 发布

文俊_

最新推荐文章于 2021-05-31 10:52:14 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

分类专栏：技术分享文章标签：鼠标滚轮图片切换鼠标滚轮 web前端

本文链接：https://blog.youkuaiyun.com/u013841514/article/details/24848311

本文介绍如何利用JavaScript处理鼠标滚轮事件，实现在网页上通过滚轮切换图片的功能，以提升用户体验。讨论了不同浏览器下的滚轮事件兼容性问题，包括onmousewheel和DOMMouseScroll，并给出了示例代码，利用wheelDelta和detail属性判断滚动方向，结合for循环实现图片的顺序切换。欢迎新手博主的读者指正和交流。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

鼠标上的滚轮是一个不错的东东，为什么这么说，因为它能帮助我们快速的浏览网页,快速的进行长篇文章的阅读。对于web前端的我们来说又怎么能不注重这个鼠标滚轮呢，那么它能如何让用户更好的浏览网页呢？

最常见就是图片的切换了，能通过滚动滚轮进行图片的浏览，省得用户还要去点下一张，做这种繁琐的步骤。来看个简单的例子吧。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标通过滚动滚轮切换图片</title>
<style>
#picBox{
	width:800px;height:600px;
	margin:70px auto;
	}
</style>
<script>
	var nowPic=1;
	function MouseWheel(e){
		var pic;
		e=e||window.event;
		for(i=1;i<4;i++){
			if(i==nowPic){
					if(e.wheelDelta){//IE
							pic=document.getElementById("pic"+i);
							pic.style.display="block";
						}else if(e.detail){//Firefox
							pic=document.getE