如何让jCarousel停在最后一张图片然后重定向到新页面？

Question

我正在使用jCarousel插件进行使用下一个按钮的幻灯片放映，我是jQuery的新手，并且想知道在查看最后一个图像之后，用户按下下一个按钮，它将重定向到另一个网页。

现在我的代码是......

<div data-jcarousel="true" data-wrap="circular" class="jcarousel">
    <ul>
        <li><img src="images/1.png" height="400" alt=""></li>
        <li><img src="images/2.png" width="600" height="400" alt=""></li>
        <li><img src="images/3.png" width="600" height="400" alt=""></li>
        <li><img src="images/4.png" width="600" height="400" alt=""></li>
    </ul>
</div>

并且下一个按钮就是这个......

<a data-jcarousel-control="true" data-target="-=1" href="#" class="jcarousel-control-prev">&lsaquo;</a>

最后，我将动态创建列表并从我的数据库中添加值，因此这段代码仅用于测试，当我能够理顺它时，那么我就很好。

Answer 1

基本步骤：

1. 使用jCarousel事件
确定您是否在最后一张幻灯片上
2. 如果是这样，请将“下一步”按钮更改为真实链接 或
3. 隐藏下一个按钮并显示以前隐藏的链接按钮，样式相同。

以下是2的例子。

$('.jcarousel')

    .on('jcarousel:animateend', function(event, carousel) {

        var last = carousel._last,
            lastIndex = carousel._items.index(last),
            total = carousel._items.size();

        if (lastIndex == (total - 1)) {
            // The end
            $('.jcarousel-control-next')
                .attr('href', 'http://google.com') // point it somewhere good
                .jcarouselControl('destroy'); // tell jCarousel to stop caring
        }
    });

这里的工作示例：http://jsfiddle.net/r4GaP/1/