1

jQuery用のjCarouselプラグインの実装で問題が発生しています。私が使用しているコードはhttp://projects.klavina.com/stackoverflow/index-slider.htmlで入手できます。

問題1： スライダー＃1のアクティブな外部コントロールを強調表示する必要があります。http://heidzir.com/blog/?p=21で解決策を見つけましたが、コメントですでに述べたように、スライダーが2番目のループに入るとこれは機能しなくなります。

問題2： ページの読み込み時にスライダー＃2（引用符）のスライドをランダム化する必要があります。liをランダム化する方法（jQueryを使用してdiv要素のシーケンスをランダム化する）を見つけましたが、スライダーが機能を停止し、最初にロードされた見積もりの​​みをスライドさせます。

どんな助けでも大歓迎です。ありがとうございました！

4

2 に答える 2

3

問題＃1があり、共有したい解決策を見つけました。循環 jcarousels の問題は、「liindex」が使用可能なすべてのリスト要素を実行した後、1 からカウントを開始するのではなく、上方向にカウントし続けることです (alert('liindex') を追加するとわかるように)ハイライト機能内。

そのため、円形の自動カルーセルに 3 つのリスト要素がある場合、最初のスクロールを終了して項目 1 からやり直すと、jcarousel は最初の項目ではなく 4 番目の項目でそれを認識します。

これが私の解決策です（これに基づいて）、合計アイテムと現在のアイテムのモジュラーでliindexを計算します。

            var totalitems = 3; // number of total items in your carousel, you can probably detect it with jquery and replace this 

            function mycarousel_initCallback(carousel) {
                    jQuery('#external ul li a').bind('click', function() {
                            carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
                            return false;
                    });
                    carousel.clip.hover(function() {
                            carousel.stopAuto();
                    }, function() {
                            carousel.startAuto();
                    });
            };
            function highlight(carousel,objectli,liindex,listate){
                    actindex = teasersize - (liindex % teasersize); // calculate which item this corresponds to after first scroll
                    jQuery('#external a').removeAttr("class","active");
                    jQuery('#external a#link'+ actindex).attr("class","active");
            };
            function removehighlight(carousel,objectli,liindex,listate){
                    actindex = teasersize - (liindex % teasersize);
                    jQuery('#external a#link'+ actindex).removeAttr("class","active");
            };
            jQuery(document).ready(function() {
                    jQuery("#mycarousel").jcarousel({
                            initCallback: mycarousel_initCallback,
                            wrap: 'circular',
                            scroll: 1,
                            size: totalitems, // previously set in var
                            auto: 7,
                            itemVisibleInCallback:  highlight,
                            itemVisibleOutCallback: removehighlight,
                            buttonNextHTML: null,
                            buttonPrevHTML: null
                    });
            });

これは、js に基づく外部ナビゲーションの外観です。

            <ul id="external">
                <li><a href="#carouselitem1" id="link1">1</a></li>
                <li><a href="#carouselitem2" id="link2">2</a></li>
                <li><a href="#carouselitem3" id="link3">3</a></li>              </ul>
于 2011-01-25T15:36:48.087 に答える
1

ティーザーサイズをあなたが持っているリストアイテムの数に設定します

var teasersize = 4; // if you have 4 list items
于 2011-04-01T00:32:47.090 に答える