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

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

VIP文章文俊_

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

阅读量1.8k

点赞数

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

本文链接：https://blog.csdn.net/u013841514/article/details/24848311

版权

鼠标上的滚轮是一个不错的东东，为什么这么说，因为它能帮助我们快速的浏览网页,快速的进行长篇文章的阅读。对于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