0

我正在使用这个漂亮的内置幻灯片脚本附带的 Orchard CMS Contoso 主题：

<p>
    <script type="text/javascript" src="/Themes/Contoso/Scripts/easySlider.js"></script>
    <script type="text/javascript">
        // <![CDATA[
        $(document).ready(function () {
            $("#slider").easySlider({
                prevText: '',
                nextText: '',
                speed: '1600',
            });
        });
        // ]]>
    </script>
</p>
<div id="slider">
    <ul>
        <li><img src="~~~~~" alt="~~~~~" /></li>
        <li><img src="~~~~~" alt="~~~~~" /></li>
        <li><img src="~~~~~" alt="~~~~~" /></li>
    </ul>
</div>

资源

但是，当将此标记复制到另一个页面时（我希望它位于页面的不同部分），我得到一个未捕获的“对象 [对象对象] 没有方法 'easySlider'”异常。

两个页面都可以访问相同的源文件，是否可能是不同的包装元素（它们附加了 CSS 类）可能是问题所在？它没有出现在文档中，但我不知道还有什么可能导致该问题。

这是 Site.css 中的相关 CSS（适用于两个页面）

#slider ul, #slider li {
    margin:0;
    padding:0;
    list-style:none;
}
#slider, #slider li { 
    /* 
        define width and height of container element and list item (slide)
        list items must be the same size as the slider area
    */ 
    width:471px;
    height:319px;
    overflow:hidden; 
}
4

1 回答 1

1

这不是您问题的直接答案，但应该有所帮助。

1.// 由于您使用的是 CMS，您的 jquery 实例“$”可能会被覆盖。使用 $.noconflict(); 避免它

2.//正确构建html标记：如果您要在同一页面上使用多个滑块，请使用类而不是id，并将所有javascript放在页面底部（连接速度慢的用户会感谢您这样做）。

所以不要写

<div id="slider">
    <ul>
        <li><img src="~~~~~" alt="~~~~~" /></li>
        <li><img src="~~~~~" alt="~~~~~" /></li>
        <li><img src="~~~~~" alt="~~~~~" /></li>
    </ul>
</div>

做

<div class="slider">
    <ul>
        <li><img src="~~~~~" alt="~~~~~" /></li>
        <li><img src="~~~~~" alt="~~~~~" /></li>
        <li><img src="~~~~~" alt="~~~~~" /></li>
    </ul>
</div>

然后，在结束 body 标记之前包含所有 javascript

<script type="text/javascript" src="/Themes/Contoso/Scripts/jquery.min.js"></script>
<script type="text/javascript" src="/Themes/Contoso/Scripts/easySlider.js"></script>
    <script type="text/javascript">
        // <![CDATA[
$.noConflict();
  jQuery(document).ready(function($) {
            $(".slider").easySlider({
                prevText: '',
                nextText: '',
                speed: '1600',
            });
        });
        // ]]>
    </script>
</body>
</html>
于 2013-08-13T14:49:53.963 回答