使用 onpage_scroll 无法在 javascript 中加载图像答案

【问题标题】：image not loading in javascript with onpage_scroll使用 onpage_scroll 无法在 javascript 中加载图像
【发布时间】：2013-11-22 11:56:13
【问题描述】：

您好，我想使用带有 onepage-scroll jquery 插件的季节脚本。但是图像没有加载。我需要做什么？ “page1”类必须显示图像。

HTML

<div class="wrapper">
   <div class="main">`

     <section class="page1">
        <div class="page_container">

    </div>
    </section>
 </div>
</div>

head 标签中的javascript

  $(document).ready(function(){
  $(".main").onepage_scroll({
    sectionContainer: "section"
  });
    });

          function seasonalBackground(node,images)
  {

    switch(new Date().getMonth())
    {
      case 2: case 3: case 4: //maart april mei
        img = 1;
        break;
      case 5: case 6: case 7: //juni juli augustus
        img = 2;
        break;
      case 8: case 9: case 10: //september oktober november
        img = 3;
        break;
      default: //december januari februari 
        img = 0;
    }

    node.style.backgroundImage = "url(\""+images[img]+"\")";

  }

结束正文标记之前的Javascript

 var imgArray = new Array();
  imgArray[0] = "images/winter.jpg";
  imgArray[1] = "images/spring.jpg";
  imgArray[2] = "images/summer.jpg";
  imgArray[3] = "images/autumn.jpg";

  seasonalBackground(document.getElementByClass('page1'),imgArray);

【问题讨论】：

请创建fiddle。
查看JavaScript error console。我敢打赌，getElementByClass 不是函数是有错误的。
既然你有 jQuery，为什么不使用它：$('.page1') 或 $('.page1:first') ？然后node.css('background-image', "url('"+images[img]+"')")

标签： javascript jquery html css jquery-plugins

【解决方案1】：

在您的函数中，您应该使用 var 声明您的 javascript 变量以将它们保留在本地而不是直接使用它们

另外，函数getElementByClass 也不存在。你必须用getElementsByClassName替换它

seasonalBackground(document.getElementsByClassName('page1')[0],imgArray);

可能还有其他错误，打开浏览器的javascript控制台看看是否有错误

【讨论】：

未捕获类型错误：无法设置未定义 index.html:34 event.returnValue 的属性“backgroundImage”已弃用。请改用标准 event.preventDefault()。这是我得到的错误
是的，抱歉，我忘记了[0]，因为 getElementsByClassName 返回一个数组，而不仅仅是一个元素。刚刚编辑

【解决方案2】：

document.getElementsByClass('page1');

不是

document.getElementByClass('page1');

然后关注第一个元素？

document.getElementsByClass('page1')[0];

所以最后...

seasonalBackground(document.getElementsByClass('page1')[0],imgArray);

如果你的代码没问题。

【讨论】：