添加幻灯片插件的图像时,开发人员工具中的对象错误

时间:2012-12-04 17:23:14

标签: javascript jquery

我通过for循环将图像插入到html的一部分中以显示在滑块上。我试图让它显示在我的浏览器上,但我的开发人员工具不断给我一个奇怪的错误。我想我在某个地方插入一个字符而jquery库并不喜欢它。

未捕获错误:语法错误,无法识别的表达式:[object Object]:eq(0)

这是我的代码。

var theImgHTML = "<div class='slides_container portfolio-img'>";

for (i = 0; i < imgList.length; i++) {
    theImgHTML += "<img src='images/portfolio/" + imgList[i] + "' alt='Slide " + (i + 1) + "' />";
}

theImgHTML += "</div>";

$("#slides").html(theImgHTML);

$("#slides").slides({
    preload: true,
    preloadImage: 'img/loading.gif',
    play: 5000,
    pause: 2500,
    hoverPause: true
});​

以下是html中的结果。

<div class="slides_container portfolio-img" style="overflow: hidden; position: relative; display: block; background-image: url(loading.gif); background-position: 50% 50%; background-repeat: no-repeat no-repeat;">
    <div class="slides_control" style="position: relative; width: 0px; height: 0px; left: 0px;">
        <img src="images/portfolio/one.jpg?1354641162837" alt="Slide 1" style="position: absolute; top: 0px; left: 0px; z-index: 0; display: none;">
        <img src="images/portfolio/two.jpg" alt="Slide 2" style="position: absolute; top: 0px; left: 0px; z-index: 0; display: none;">
        <img src="images/portfolio/three.jpg" alt="Slide 3" style="position: absolute; top: 0px; left: 0px; z-index: 0; display: none;">
    </div>
</div>

思想?

1 个答案:

答案 0 :(得分:0)

最终出现的问题是,当将变量“theImgHTML”(包含我的图像的标记)添加到幻灯片中时,我需要用div包含每个图像。我没有这样做。根据幻灯片插件显示图像时..每个div都需要在每个图像周围都有一个包围的div。

我在没有div的情况下尝试了它,只是自己拥有了图像而且插件不接受它(因此上面的错误)。希望这有助于将来的某个人。

这是一个可行的例子。

<div id="slides">
     <div class="slides_container">
          <div>
             <img src="http://placehold.it/570x270">
          </div>
          <div>
             <img src="http://placehold.it/570x270">
          </div>
      </div>
</div>

有关详细信息,请转到下面的链接并转到基本标记。

http://www.slidesjs.com/