0

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

1 回答 1

1

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

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

于 2013-06-13T13:54:08.183 回答