Question

我在jquery carouselfredsel滑块中寻找具有自动滑动功能的解决方案。 jsfiddle.net/5p349dpo/4 /

他使用以下代码定义：

jQuery("#grid").carouFredSel({
    width: 5000,
    padding: 0,
    auto: true,
    prev: "#grid-prev",
    next: "#grid-next",
    items: {
        visible: 3,
        minimum: 1,
        start: -1
    },
    scroll: {
        items: 1,
        duration: 1000
    }
});

你可以看到，＆＃39; auto＆＃39;选项设置为＆＃39; true＆＃39;。默认值为“假”＆＃39;

图片No.1 - 在这张图片中描述了问题和滑块的行为，以及它应该是什么样子。

图片No.2 - 这是启用自动幻灯片后的功能。

Picture No.1 Picture No.2

现在：左/右幻灯片褪色和居中幻灯片（主动幻灯片）不褪色的主要原因是这段代码：

//突出显示中心面板

jQuery(window).resize(function() {
    var nextCenter = Math.ceil(jQuery(window).width() / 900);
    var prevCenter = Math.ceil((jQuery(window).width() - 900) / 900);
    jQuery(".grid-panel:eq("+prevCenter+")").addClass("active-panel");

    jQuery("#grid-next").click(function(){
        jQuery(".grid-panel").removeClass("active-panel");
        jQuery(".grid-panel:eq("+nextCenter+")").addClass("active-panel");
    });

    jQuery("#grid-prev").click(function(){
        jQuery(".grid-panel").removeClass("active-panel");
        jQuery(".grid-panel:eq("+prevCenter+")").addClass("active-panel");
    });
}).resize();

现在你可以看到，next / prev按钮已定义如何处理左/中/右滑动，因为它们是褪色/不褪色/褪色。

当我在php文件中将auto：false设置为auto：true时。滑块开始像第2号图片（不褪色/褪色/褪色等），就像它只是冻结那些褪色/不褪色的风格，让这个漂亮的滑块混乱＃。 / p>

我想添加类似于我在帖子中包含的第二个代码的内容，因此自动滑块的行为就像我点击“下一个”＆＃39;＆＃39;＆＃39;按钮。

请帮忙。

Answer 1

好的...

过了一段时间，我找到了一个解决方案，它并不是我想要的第一个复杂，它更简单。

甚至不需要启用自动滚动。由于''next / prev''按钮已配置为可以工作，我只是模拟它们，它看起来像这样：

function simulateClick(){
    $('#grid-next').click();
};

setInterval(simulateClick, 2000);

你去，简单。我希望这将有助于将来的某些人。

再见：）

jquery滑块中的自动淡入问题

1 个答案: