0

我正在使用此处找到的 SlidesJS 产品示例http://slidesjs.com/examples/product/

我想在页面上有超过 1 个这样的单元，但是当只是复制它的标记并在下面粘贴时不起作用。第一个会显示得很好，但第二个只显示 2 个分页元素并且不可点击。我的主要问题是为什么我再次复制滑块的方法不起作用，我的一般方法完全错误吗？一般来说，SlidesJS 或 Jquery 是否存在一些怪癖，需要我创建单独的 css div 或类似的东西？

HTML：

<div id="containerSlides">
      <div id="products_example">
        <div id="products">
            <div class="slides_container">
                <a href="#"><img src="img/lamp1.png" width="360" alt="1144953 3 2x"></a>
                <a href="#" ><img src="img/lamp2.png" width="360" alt="1144953 1 2x"></a>

            </div>
            <ul class="pagination">
                <li><a href="#"><img src="img/lamp1.png" width="55" alt="1144953 3 2x"></a></li>
                <li><a href="#"><img src="img/lamp2.png" width="55" alt="1144953 1 2x"></a></li>
            </ul>
        </div>
    </div>
</div>
<div id="containerSlides">
      <div id="products_example">
        <div id="products">
            <div class="slides_container">
                <a href="#"><img src="img/lamp3.png" width="360" alt="1144953 3 2x"></a>
                <a href="#" ><img src="img/lamp4.png" width="360" alt="1144953 1 2x"></a>

            </div>
            <ul class="pagination">
                <li><a href="#"><img src="img/lamp3.png" width="55" alt="1144953 3 2x"></a></li>
                <li><a href="#"><img src="img/lamp4.png" width="55" alt="1144953 1 2x"></a></li>
            </ul>
        </div>
    </div>
</div>

CSS：

#containerSlides {
    width:580px;
    padding:10px;
    margin:0 auto;
    position:relative;
    z-index:0;
    float:left;
}

#products_example {
    width:600px;
    height:282px;
    position:relative;
}

/*
    Slideshow
*/

#products {
    margin-left:26px;
}

/*
    Slides container
    Important:
    Set the width of your slides container
    Set to display none, prevents content flash
*/

#products .slides_container {
    width:360px;
    /*overflow:hidden;*/
    float:left;
    position:relative;
    border:1px solid #dfdfdf;
    display:none;
}

/*
    Each slide
    Important:
    Set the width of your slides
    If height not specified height will be set by the slide content
    Set to display block
*/

.slides_container a {
    width:360px;
    height:268px;
    display:block;
}

/*
    Next/prev buttons
*/

#products .next,#products .prev {
    position:absolute;
    top:127px;
    left:0;
    width:21px;
    height:0;
    padding-top:21px;
    overflow:hidden;
    display:block;
    z-index:101;
}

#products .prev {
    background:url(../img/arrow-prev.png);
}

#products .next {
    left:398px;
    background:url(../img/arrow-next.png);
}

/*
    Pagination
*/

#products .pagination {

    width:55px;
    padding:5px 5px;
    float:left;
    margin-left:30px;
    border-radius:5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
}

#products .pagination li {
    float:left;
    margin:2px 4px;
    list-style:none;
}

#products .pagination li a {
    display:block;
    width:55px;
    height:41px;
    margin:1px;
    float:left;
    background:#f9f9f9;
}

#products .pagination li.current a {
    border:1px solid #7f7f7f;
    margin:0;
}
4

1 回答 1

2

如果没有看到 javascript，就不可能确切地说出问题出在哪里，但是标记存在一些直接问题。

页面上有多个具有相同 id 的元素（containerSlides、products_example、products）。

为第二个容器提供唯一 ID 将有助于解决问题。然后您可能（再次，不能肯定地说没有看到 javascript）需要添加另一个“初始化”调用以在第二个容器上设置 slidesjs 以及将 id 添加到您的 css 以便第二个容器获得相同的样式.

前任：

标记

<code>
<div id="secondContainerSlides">
    …
</div>
</code>

CSS

<code>
#containerSlides,
#secondContainerSlides{
    …
}
</code>
于 2012-06-16T20:38:37.810 回答