我正在尝试使用以下教程来更改主体的背景图像。
http://www.javascriptkit.com/javatutors/onmousewheel.shtml
但是背景图像没有改变。
HTML代码-
<body id="img"></body>
CSS代码-
#img {
overflow: hidden;
background: url("././images/1.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
JavaScript代码-
var myimages=[
"./images/2.jpg",
"./images/3.jpg",
"./images/4.jpg"
]
var slideshow=document.getElementById("img")
var nextslideindex=0
function rotateimage(e){
var evt=window.event || e //equalize event object
var delta=evt.detail? evt.detail*(-120) : evt.wheelDelta
nextslideindex=(delta<=-120)? nextslideindex+1 : nextslideindex-1
nextslideindex=(nextslideindex<0)? myimages.length-1 : (nextslideindex>myimages.length-1)? 0 : nextslideindex
slideshow.style.background=myimages[nextslideindex]
if (evt.preventDefault)
evt.preventDefault()
else
return false
}
var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll""mousewheel"
if (slideshow.attachEvent)
slideshow.attachEvent("on"+mousewheelevt, rotateimage)
else if (slideshow.addEventListener) //WC3 browsers
slideshow.addEventListener(mousewheelevt, rotateimage, false)
最佳答案
您正在尝试在DOM加载之前（在body元素加载之前）使用getElementById。
建议您使用jQuery来捕获DOM完成加载的事件。在这里阅读更多：
http://learn.jquery.com/using-jquery-core/document-ready/
关于javascript - 无法在鼠标滚动时更改背景图像，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17039038/