jQuery循环自定义导航

Question

使用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/)或多或少地做了我想在幻灯片上实现的目标.

谢谢

Answer 1

问题解决了:

我用过这段代码:

        $('#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"而不是lite版本,因为它不支持pager选项.