如何用幻灯片放映中的幻灯片过渡替换淡入淡出过渡（仅适用于javascript）？

Question

我是JavaScript初学者。 我想在简单的幻灯片放映中用幻灯片过渡替换淡入淡出过渡。

到目前为止，我无法做到。 当前代码如下：

function transSlide()
{
    nextSlide.style.display = "block";

    var opacity = slideTransStep / slideTransitionSteps;

    crtSlide.style.opacity = "" + (1 - opacity);
    crtSlide.style.filter = "alpha(opacity=" + (100 - opacity*100) + ")";

    nextSlide.style.opacity = "" + opacity;
    nextSlide.style.filter = "alpha(opacity=" + (opacity*100) + ")";

    if (++slideTransStep <= slideTransitionSteps)
        transTimeout = setTimeout("transSlide()", slideAnimationInterval);
    else
    {
        crtSlide.style.display = "none";
        transComplete();
        clearInterval(myVar);
    }
}

Answer 1

opacity ，您想要更改position以及top ， left ， bottom和right ， 请参见此处的MDN文档 。

就是说，我认为您可以出于学习目的而“手动”使用JavaScript编写动画，但是通常应使用类似此类的库。 有入门的jQuery和jQuery UI效果 。

编辑：

当然可以，我可以帮忙。 我用一个非常基本的动画示例创建了CodePen 。 它使用setInterval来定期执行一些代码，增加CSS属性left移动的元素。 您可以在这里查看它： http : //codepen.io/timbuethe/pen/wzIuA甚至可以将其分叉使用。