1

作成したWebコントロールでjQueryスライドショーを機能させようとしています。互換モードをオンにしたIE9でスライドショーを動作させることはできますが、ChromeまたはFirefoxで正しく動作させることができません。

私はjQueryの経験があまりないので、明らかな何かが欠けている可能性があります。CMSが私の問題と関係があるのでSitecoreを使用しているかどうかはわかりません。

これは私がウェブ上で見つけて遊んでいるサンプルコードです。誰か助けてもらえますか？

ありがとう！crjunk

<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.noconfict.js」のスクリプトタグを挿入することに注意してください。window。$ sc = jQuery.noConflict（）;

これは、jQuery（'。myclass'）を作成するときに誰もが使用しているwindow.jQuery変数を上書きするため、あまり良くありません。

jQueryの標準機能は引き続き正常に機能します。しかし...「window.jQuery」によって参照されなくなったjQueryインスタンスによってロードされるため、インジェクションの前にロードされなかったモジュールとjQuery拡張機能は機能しません。

「jQuery.noconfict.js」はbodyタグのすぐ下に挿入されます。これは、プレビューモードでは、本体の任意の場所にあるスクリプトタグでのjQueryへのすべての参照が、モジュールがロードされていないSitecorenoconflictインスタンスを使用することを意味します。

つまり、jQuery変数を使用したり、$を使用したりしないでください...独自の名前空間で独自のjQuery変数を作成してください

于 2013-01-24T17:05:05.210 に答える
2

使用しているSitecoreのバージョンによっては、

...デザイナーやデバッガーを含むほとんどのページエディターが使用するPrototype.jsと競合します。「jQuery.noConflict（）」を呼び出して$関数をオーバーライドすることで簡単に回避できます。

このSitecoreのニュアンスを乗り越えたら、問題はjavascript/cssコードです。あなたは確かにjQueryの人ではないので、 http： //slidesjs.comなどのスライドショーに缶詰のソリューションを活用することを検討します。

于 2012-05-30T12:49:13.573 に答える
1

作業を簡単にするために、コードを無名関数でラップし、jQuery変数を渡します。これは、他の人がjQueryプラグインのように使用するコードを記述している場合はおそらくより明白ですが、コストを節約するのに役立ちます。

匿名関数を追加してjQuery変数を渡すと、後で$変数で問題が発生するのを防ぐことができます。

    <script type="text/javascript">

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

    </script>
于 2013-01-16T21:22:55.900 に答える
1

$はjQueryを使用するためにまったく必要ではなく、単なるショートカットであることに注意してください。すべての$（）インスタンスをjQuery（）に置き換えると、Sitecoreで競合することなく機能するはずです。競合しているのは、プロトタイプが使用する$だけです。また、ラッピングに関するマークのコメントも便利です。

于 2012-05-30T18:01:54.507 に答える