Question

所以我构建了一个相当简单的幻灯片，但无法弄清楚如何融入淡入/淡出效果。我已经读过最好使用JQuery，但有些人建议标准的JavaScript也可以做到这一点 - 无论如何，我已经尝试了几个脚本，但似乎都没有。如果有人在这里可以提供帮助，我会欠他们的债务！

这是我的代码：

<script type = "text/javascript">
    var Image = new Array("pics/21cents.png", "pics/22cents.png", "pics/23cents.png");
    var Image_Number = 0;
    var Image_Length = Image.length - 1;
    var x;
    function change_image(num) {
        Image_Number = Image_Number + num;
        if (Image_Number > Image_Length) {
            Image_Number = 0;
        }
        if (Image_Number < 0) {
            Image_Number = Image_Length;
        }
        document.slideshow1.src=Image[Image_Number];
        return false;
    }
    function auto() {
        x = setInterval("change_image(-1)", 5000);  
    }
    function stop() {
        clearInterval(x);
    }
    auto();
</script>

Answer 1

最简单的方法是使用jQuery。除了一些有用的UI效果（例如slideDown()，fadeOut()等）之外，您还可以轻松选择和操作DOM元素。

例如，如果您打算使用jQuery，那就像以下一样简单：

var $img = $("<img>").css({"display": "none"}).prop("src", "http://placehold.it/500x500");
$("div").html($img);
$("img").fadeIn();

否则要获得淡入/淡出效果，您必须设置一些setInterval()循环，在每次迭代时将不透明度更改百分比。 E.G：

setInterval(function() {
    var img = document.getElementById("image");

    var opacity = img.style.opacity;
    if(opacity !== 1) {
        img.style.opacity += 0.01;
    }
}, 100);

使用Javascript进行FadeOut / FadeIn事件的幻灯片放映

1 个答案: