0

我会直接进入它，这里有点新手。

我有一个在 jQuery 上运行的幻灯片，它也包含基于文本的内容（我们将这个滑块称为“主滑块”）。当您滑过时，内容会发生变化（显然）。我想做的是把另一个较小的滑块，我们称之为“辅助滑块”放入主滑块上的一个较大的幻灯片中，以展示一些摄影内容。

我有问题。

我可以让辅助滑块与主滑块在同一页面上工作，但是当我将它“嵌入”到主滑块时遇到问题。我确定这与插件针对 div 的方式有关。这是标记：

<div id="img4" class="ctnsec">
    <div class="slidecontent">
        <div class="graphicleft">
            <ul>
                <li style="float:left;line-height:55px;">
                    <p class="topcopy">GRAPHIC DESIGN</p>
                </li>
                <li style="float:left;padding-left:100px;line-height:38px;">
                    <p class="botcopy">SEE THE DIFFERENCE</p>
                </li>
            </ul>
            <div class="clearme"></div>
            <p>Lorum Ipsum</p>
        </div>
        <!--graphicleft-->
        <div id="banner-slide">
            <ul class="bjqs">
                <li>
                    <img src="images/logos/crust.png" alt="under the crust" title="under the crust" />
                </li>
                <li>
                    <img src="images/logos/space_la.png" alt="space la" title="space la" />
                </li>
                <li>
                    <img src="images/logos/black_cat.png" alt="the black cat" title="the black cat" />
                </li>
                <li>
                    <img src="images/logos/sia.png" alt="social investment advocates" title="social investment advocates" />
                </li>
            </ul>
        </div>
        <!--banner-slide-->
    </div>
    <!--slidecontent-->
</div>
<!--img4-->

这是页面中包含的插件 javascript：

jQuery(document).ready(function ($) {

    $('#banner-slide').bjqs({
        animtype: 'slide',
        height: 300,
        width: 400,
        responsive: true,
        randomstart: true
    });

});

好的，所以你看到插件如何使用“bjqs”类来定位“banner-slide”的 div id？我需要知道如何告诉插件我需要在 div id 内定位那些相同的东西“img4”。有没有简单的方法来解决这个问题？

提前感谢您的帮助，我真的很感激！

-帕特里克

4

2 回答 2

1

If you have multiple <div id="banner-slide"> elements, that's invalid HTML, since IDs must be unique. You should use a class instead, <div class="banner-slide">.

Then you can target it with:

$("#img4 .banner-slide .bjqs").bxSlider( { ... });

The name of the method is .bxSlider(), not .bjqs -- you seem to be confusing the use of . to indicate classes in CSS selectors and also to invoke methods in Javascript/jQuery.

于 2013-06-27T01:01:28.447 回答
0

You can say

$('#img4 #banner-slide').bjqs({
    animtype: 'slide',
    height: 300,
    width: 400,
    responsive: true,
    randomstart: true
});

Having said that, you're using an ID for banner-side, so using a child selector doesn't really make sense since there can only be one banner-slide.

于 2013-06-27T01:00:48.977 回答