jCarousel 显示已选择类的项目答案

【问题标题】：jCarousel show item with class selectedjCarousel 显示已选择类的项目
【发布时间】：2011-12-30 12:56:06
【问题描述】：

我有一个包含class=selected 的项目列表，每隔n 秒将class=selected 更改为下一个项目。

如何激活jCarousel 滚动并始终显示带有class=selected 的项目？

【问题讨论】：

标签： javascript jquery css plugins jcarousel

【解决方案1】：

在 jcarousel 上设置自动滚动不是更容易吗？

您可以在这里找到信息：http://sorgalla.com/projects/jcarousel/

属性：“auto”
指定定期自动滚动内容的秒数。如果设置为 0（默认），则自动滚动关闭。

您无需额外编码即可将类更改为“已选择”

【讨论】：

【解决方案2】：

您可以像这样使用jcarousel scroll 方法：

var link = $("#linkIWantToScrollTo");

var scrollTo = link.parent().attr("jcarouselindex");
var animateScrolling = true;

// Using jcarousel instance from the element where you applied jcarousel, scroll it...
$("#menu").jcarousel('scroll', scrollTo - 1, animateScrolling, function(scrolled) {
        if (scrolled) {
            console.log('The carousel has been scrolled');
        } else {
            console.log('The carousel has not been scrolled');
        }
 });

注意：必须使用scrollTo - 1，因为index is 0 based。否则你会得到不想要的结果！ :)

link 是一个锚<a> 就像这样：

<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-8 jcarousel-item-8-horizontal" style="float: left; list-style: none outside none;" jcarouselindex="14">
<a id="linkIWantToScrollTo" title="Educação de Pacientes e Familiares" href="#">
</li>

使用上面的代码jcarousel 将滚动到位置14。现在在我的一个项目中效果很好。位置14 不在视线范围内，应用滚动方法可提供出色的用户体验，因为该项目将在视线范围内。

【讨论】：