淡出幻灯片 Javascript答案

【问题标题】：Fade to Slide Javascript淡出幻灯片 Javascript
【发布时间】：2017-12-26 20:02:54
【问题描述】：

我有这个网站，www.harispapadakis.eu，我正在使用这个代码

function changeBackground() {
    ++currentBackground > 2 && (currentBackground = 0),
    $(".c-hero").fadeOut(4e3, function() {
        $(".c-hero").css({
            "background-image": "url('" + backgrounds[currentBackground] + "')"
        }), 
        $(".c-hero").fadeIn(3e3)
    }), 
    setTimeout(changeBackground, 15e3)
}

var currentBackground = 0,
    backgrounds = [];

backgrounds[0] = "media/main.jpg", 
backgrounds[1] = "media/main2.jpg", 
backgrounds[2] = "media/main3.jpg", 
$(document).ready(function() {
    setTimeout(changeBackground, 7500)
});

（编辑说明：从缩小代码格式化，其中if 缩小为&&，; 缩小为,，3000 缩小为3e3）

这段代码，正在用 FadeIn 和 FadeOut 改变背景 src...

我想通过向左滑动来改变淡入淡出...它正在改变背景图片，我想要一个漂亮的动画..

提前致谢

【问题讨论】：

你试过什么？ SO 不是免费的编码或教程服务！你必须表明你已经付出了一些努力来解决你自己的问题。在我看来，您只是简单地获取了一些代码，并且您要求我们将其行为更改为您想要的。证据是由 Derek 为您格式化的缩小代码。
我在网上找到了该代码，并对其进行了一些更改。我把淡入淡出。我不知道是否存在我要求的类似内容，这就是我这样发布的原因。
它存在吗？是的。它被称为图像滑块。您必须自己对其进行编程或下载许多可用的库之一。例如：jssor.com 或 amazingslider.com 您仍需要更改其行为以自动为您滑动图像并将其设置在背景上。

标签： javascript css animation

【解决方案1】：

这个答案可能会有所帮助：How do you fadeIn and animate at the same time?

考虑使用 jQuery 的 .animate 函数来执行多个 css 转换，而不是使用 .fadeIn。

例如，代替：

$(".c-hero").fadeIn(3e3)

试试@see http://api.jquery.com/animate/:

$(".c-hero").animate(
   {opacity: 1, left: "-=50"}, // css attributes to animate
   3000, // duration in seconds
   function(){ /**callback function after it completes**/}
 });

【讨论】：

再次阅读问题。 It's changing the background picture。您不能使用动画来更改图片。他正在寻找图像滑块。