2

链接到网站

我确信我的页面幻灯片和图像滑块之间存在冲突..

这是页面幻灯片的代码： 

<ul>
    <li>
        <a href="javascript:$.pageslide({ direction: 'right', href: '_secondary.html' })" class="first">Slide to the right, and load content from a secondary page.</a>
    </li>

    <li>
        <a href="javascript:$.pageslide({ direction: 'left', href: '/template/_secondary.html' })" class="second">Open the page programatically.</a>
    </li>
</ul>
<script>
var jq171 = jQuery.noConflict();
</script>
<script src="/template/js/jquery-1.7.1.min.js"></script>
<script src="/template/js/jquery.pageslide.js"></script>
<script>
    /* Default pageslide, moves to the right */
    $(".first").pageslide({ direction: "right"});

    /* Slide to the left, and make it model (you'll have to call $.pageslide.close() to close) */
    $(".second").pageslide({ direction: "left"});
</script>`

这是图像滑块：此代码引用了两个 jQuery 库 - v1.5.1 和 orbit-1.2.3

<div class="container" style="margin-top:20px; margin-left:10px;">
    <div id="featured"> 
        <a href=""><img src="*****" /></a>
        <a href=""><img src="*****" /></a>
        <a href=""><img src="*****" /></a>
        <a href=""><img src="*****" /></a>
        <a href=""><img src="*****" /></a>
    </div>

有一分钟我让他们俩一起工作，但我不确定是什么导致了冲突。我已经尝试过不同变体的无冲突脚本。如果您需要更多信息来帮助，请告诉我。谢谢！

4

4 回答 4

3

由于库脚本加载速度的差异，代码有时会起作用，有时会不起作用。有时，它的加载速度足以在您开始使用它时就位，有时则不然。这就是为什么你应该把你的初始代码放在一个ready块中：

<script src="/template/js/jquery-1.7.1.min.js"></script>
<script src="/template/js/jquery.pageslide.js"></script>
<script type="text/javascript">
    var jq171 = jQuery.noConflict();
    jq171.ready(function ($) {
        /* Default pageslide, moves to the right */
        $(".first").pageslide({ direction: "right"});

        /* Slide to the left, and make it model (you'll have to call $.pageslide.close() to close) */
        $(".second").pageslide({ direction: "left"});
    });
</script>

另外，我敦促您重新考虑在同一页面甚至同一站点上使用两个库。一个就够了！

文档

于 2012-07-06T18:05:27.330 回答
2

在加载 jQuery 后使用noConflict并使用它来代替$()：

var jq171 = jQuery.noConflict();
jq171(document).ready(function () {
   jq171(".first").pageslide({ direction: "right"});
   // ....
})
于 2012-07-06T18:06:41.903 回答
1

在传递 $ 变量的就绪状态下运行您的 jQuery。

只使用一个 jQuery 库，最好是最新的并且来自CDN。

jQuery.noConflict();
jQuery.ready(function ($) {
    /* Default pageslide, moves to the right */
    $(".first").pageslide({ direction: "right"});

    /* Slide to the left, and make it model (you'll have to call $.pageslide.close() to close) */
    $(".second").pageslide({ direction: "left"});
});

// Outside the ready state $ calls the other library.
于 2012-07-06T18:08:38.390 回答
1

您有三个不同版本的 jQuery 加载。忘记使用 noConflict 来处理它们，没有理由加载三个版本。

于 2012-07-06T18:23:13.190 回答