2

jQuery Cycle プラグインを使用してコンテンツ (写真ではない) のスライドショーを作成する - 以下のコードを機能させるにはどうすればよいですか?

これは私のスライドショーの内容です:

        <div id="slideshow">
            <div>
                <h1>Title One</h1>
                <p>Description for title one</p>         
            </div>
            <div>
                <h1>Title two</h1>
                <p>Description for title two</p>         
            </div>
            <div>
                <h1>Title Three</h1>
                <p>Description for title three</p>         
            </div>
            <div>
                <h1>Title Four</h1>
                <p>Description for title four</p>         
            </div>
        </div>

そして、これは以下のカスタム ナビゲーションです。

        <div id="slideshow-nav">
            <ul>
                <li>
                    <a href="#">
                        <span class="thumb one"></span>
                        <span class="title">One</span>
                        <span class="desc">Desc one</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="thumb two"></span>
                        <span class="title">Two</span>
                        <span class="desc">Desc two</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="thumb three"></span>
                        <span class="title">three</span>
                        <span class="desc">Desc three</span>
                    </a>
                </li>
                <li class="last">
                    <a href="#">
                        <span class="thumb four"></span>
                        <span class="title">Four</span>
                        <span class="desc">Desc Four</span>
                    </a>
                </li>

            </ul>
        </div>

明らかに、ナビゲーションのアンカー リンクを上の右のスライドに対応させたいと考えています。可能であれば、現在選択されているナビゲーションに「アクティブな」クラスを追加したいですか？

例として、Brightcove (http://www.brightcove.com/en/) は、スライドショーで私が達成しようとしていることを多かれ少なかれ行います。

ありがとう

4

1 に答える 1

9

問題が解決しました：

私はこのコードを使用しました：

        $('#slideshow').cycle({
            fx: 'scrollHorz',
            speed: 500,
            timeout: 8000,
            pause: 1,
            cleartype: true,
            cleartypeNoBg: true,
            pager: '#slideshow-nav',
            pagerAnchorBuilder: function(idx, slide) {
                return '#slideshow-nav li:eq(' + (idx) + ')';
            }
        });

        $('#slideshow-nav li').click(function() { 
            $('#slideshow').cycle('pause'); 
        });

        $.fn.cycle.updateActivePagerLink = function(pager, currSlideIndex) { 
            $(pager).find('li').removeClass('activeLI') 
                .filter('li:eq('+currSlideIndex+')').addClass('activeLI'); 
        };

これはページャーオプションをサポートしていないため、ライトバージョンではなく「jquery.cycle.all.min.js」も使用してください。

于 2011-03-22T21:56:07.990 に答える