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”而不是 lite 版本，因为它不支持寻呼机选项。

于 2011-03-22T21:56:07.990 回答