jquery滑块中自动淡入的问题答案

【问题标题】：Issue with Automatic fading in jquery sliderjquery滑块中自动淡入的问题
【发布时间】：2014-08-25 09:26:17
【问题描述】：

我正在我的 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
    }
});

如您所见，“自动”选项设置为“真”。默认值为“假”。

图片 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();

现在您可以看到，下一个/上一个按钮已被定义为如何处理左/居中/右幻灯片，因为它们是褪色/非褪色/褪色的。

当我在 php 文件中将 auto: false 设置为 auto: true 时。滑块开始表现得像第二张图片（不褪色/褪色/褪色......等），就像它只是冻结了那些褪色/不褪色的风格，并让这个漂亮的滑块处于“混乱”状态。

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

请帮忙。

【问题讨论】：

可以分享一下codepen或者jsfiddle的demo吗？
在html中添加包含幻灯片图像的HTML，你提供的小提琴还不够理解。
只有页脚，需要查看滑块的图像。
好吧，我不知道如何在图片中包含 html，因为整个页面都托管在 wamp 上，并且所有图片链接都指向 localhost/.... 我会尝试找到一些解决方案...给我几分钟
这里是协作链接：jsfiddle.net/5p349dpo/4/#&togetherjs=dQn3RN48iA

标签： jquery css

【解决方案1】：

好的...

一段时间后，我找到了一个解决方案，它并没有我最初寻找的那么复杂，它甚至更简单。

甚至不需要启用自动滚动。而且由于“下一个/上一个”按钮已经配置为可以工作，我只是模拟了它们，它看起来像这样：

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

setInterval(simulateClick, 2000);

你去，简单。我希望这对将来的人有所帮助。

再见:)

【讨论】：