1

我正在尝试在我创建的 Web 控件上制作 jQuery 幻灯片放映。我可以让幻灯片放映在 IE 9 中打开兼容模式，但我无法让它在 Chrome 或 Firefox 中正常工作。

我对 jQuery 不是很有经验，所以我可能遗漏了一些明显的东西。我不确定使用 Sitecore 作为 CMS 是否与我的问题有关。

这是我在网上找到并一直在玩的一些示例代码。任何人都可以帮忙吗？

谢谢！垃圾

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function () {

    var currentPosition = 0;
    var slideWidth = 500;
    var slides = $('.slide');
    var numberOfSlides = slides.length;
    var slideShowInterval;
    var speed = 3000;


    slideShowInterval = setInterval(changePosition, speed);

    slides.wrapAll('<div id="slidesHolder"></div>')

    slides.css({ 'float': 'left' });

    $('#slidesHolder').css('width', slideWidth * numberOfSlides);


    (function changePosition() {
        if (currentPosition == numberOfSlides - 1) {
            currentPosition = 0;
        } else {
            currentPosition++;
        }
        moveSlide();
    })(jQuery);


    (function moveSlide() {
        $('#slidesHolder')
              .animate({ 'marginLeft': slideWidth * (-currentPosition) });
    })(jQuery);

});
</script>


<div id="slideshow">
 <div id="slideshowWindow">
    <div class="slide">
             <img src="../../images/slider_1.jpg" />
             <div class="slideText">
                 <h2 class="slideTitle">Slide 1</h2>
                 <p class="slideDes">Lorem ipsum dolor sit amet, 
                 consectetur adipisicing elit, sed do eiusmod tempor 
                 incididunt ut labore et dolore magna aliqua.</p>
                 <p class="slideLink"><a href="#">click here</a></p>
             </div><!--/slideText-->
        </div><!--/slide-->
    <div class="slide">
         <img src="../../images/slider_2.jpg" />
                 <div class="slideText">
                 <h2 class="slideTitle">Slide 2</h2>
                 <p class="slideDes">Lorem ipsum dolor sit amet, 
                 consectetur adipisicing elit, sed do eiusmod tempor 
                 incididunt ut labore et dolore magna aliqua.</p>
                 <p class="slideLink"><a href="#">click here</a></p>
             </div><!--/slideText-->
    </div><!--/slide-->
    <div class="slide">
         <img src="../../images/slider_3.jpg" />
                 <div class="slideText">
                 <h2 class="slideTitle">Slide 3</h2>
                 <p class="slideDes">Lorem ipsum dolor sit amet, 
                 consectetur adipisicing elit, sed do eiusmod tempor 
                 incididunt ut labore et dolore magna aliqua.</p>
                 <p class="slideLink"><a href="#">click here</a></p>
             </div><!--/slideText-->
    </div><!--/slide-->
 </div><!--/slideshowWindow-->

4

4 回答 4

5

您应该注意，页面编辑器（在预览模式下）会为“jQuery.noconflict.js”注入一个脚本标签，该标签以：window.$sc = jQuery.noConflict();

这不是很好，因为它覆盖了每个人在编写 jQuery('.myclass') 时都在使用的 window.jQuery 变量

jQuery 标准功能仍然可以正常工作。但是...在注入之前未加载的任何模块和 jQuery 扩展都将不起作用，因为它们是由不再由“window.jQuery”引用的 jQuery 实例加载的。

“jQuery.noconfact.js”被注入到 body 标签的正下方。这意味着在预览模式中，正文中任何位置的脚本标记中对 jQuery 的所有引用都将使用 Sitecore noconflict 实例，而不是您认为的未加载模块的实例！

简而言之：不要使用 jQuery 变量，也不要使用 $ ...在自己的命名空间中创建自己的 jQuery 变量

于 2013-01-24T17:05:05.210 回答
2

根据您使用的 Sitecore 版本，可能会有

...与大多数页面编辑器（包括设计器和调试器）使用的 Prototype.js 冲突。可以通过调用“jQuery.noConflict()”覆盖 $-function 来简单地解决它

一旦你克服了这个 Sitecore 细微差别，问题就出在你的 javascript/css 代码上。诚然，你不是一个 jQuery 人，我会考虑利用一个预制的解决方案来制作幻灯片，例如http://slidesjs.com

于 2012-05-30T12:49:13.573 回答
1

值得注意的是，使用 jQuery 根本不需要 $，它只是一个快捷方式。如果您用 jQuery() 替换所有 $() 实例，它应该可以在 Sitecore 中正常工作。只是原型使用的 $ 是冲突的。此外，马克关于包装的评论也很方便。

于 2012-05-30T18:01:54.507 回答
1

为了让您的生活更轻松，将您的代码包装在一个匿名函数中并传入 jQuery 变量。如果您正在编写一些其他人将使用的代码，例如 jQuery 插件，这可能更明显，但可以帮助您节省时间。

添加匿名函数并传入 jQuery 变量将防止以后 $ 变量出现问题。

    <script type="text/javascript">

    (function ($) {
            $(document).ready(function () {
                // Do some awesome stuff...
            });
        })(jQuery);

    </script>
于 2013-01-16T21:22:55.900 回答