Question

我正在尝试使用以下教程更改正文的背景图像。 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)

Answer 1

您正在尝试在加载DOM之前使用getElementById（在body元素加载之前）。

建议您使用jQuery来捕获DOM加载完成的事件。在这里阅读更多： http://learn.jquery.com/using-jquery-core/document-ready/

无法在鼠标滚动上更改背景图像

1 个答案: