Question

寻找（简单）方法为我的网站创建幻灯片我在这里找到了以下问题：How to create image slideshow in html?。我借用（更正的）代码，根据我的需要调整它，现在我有我想要的，但图像之间的过渡太快了。它不是幻灯片的速度，而是从一个图像到下一个图像的混合或淡入。变化太突然了。我希望它们能够逐渐顺利地发生。我可以添加什么，或者如何更改它以减慢速度？这是它：

<head>
<script type="text/javascript">
var image1 = new Image()
image1.src = "images/pentagg.jpg"
var image2 = new Image()
image2.src = "images/promo.jpg"
</script>
</head>
<body>
<p><img src="images/pentagg.jpg" width="500" height="300" name="slide" /></p>
<script type="text/javascript">
        var step=1;
        function slideit()
        {
            document.images.slide.src = eval("image"+step+".src");
            if(step<2)
                step++;
            else
                step=1;
            setTimeout("slideit()",2500);
        }
        slideit();
</script>
</body>

感谢您的帮助。

Answer 1

您可以通过在代码中进行以下更改来实现此目的

setTimeout(slideit(),10000);

而不是

setTimeout(slideit(),2500);

这里2500表示2.5秒，10000表示10秒，根据需要可以使用任何参数。

希望这可以解决您的问题。

Answer 2

根据您的评论，您希望显示图像更改之间的转换，然后使用jquery并按顺序执行此操作：

将不透明度设置为0（fadeOut），
更改图片，
将不透明度设置为1（fadeIn）

或编写自己的动画逻辑，以便在没有jquery的情况下执行相同操作。

使用jquery的解决方案：

var $slide = $(document.images.slide);

function slideit() {
    //fadeout the last image.
    $slide.fadeOut(function () {
        document.images.slide.src = eval("image" + step + ".src");
        //after changing the image, fadeIn the new image.
        $slide.fadeIn(function () {
            if (step < 2) step++;
            else step = 1;
            //everything is done... now run the timer for next slide.
            setTimeout(slideit, 5500);
        });
    })
}

jsfiddle：http://jsfiddle.net/vaf84vLd/

如何减慢html中的图像幻灯片？

2 个答案: