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

【问题标题】：How to slow down an image slideshow in html?如何减慢html中的图像幻灯片？
【发布时间】：2015-02-26 05:43:35
【问题描述】：

寻找一种（简单的）方法来为我的网站创建幻灯片，我在这里发现了以下问题：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>

感谢您的帮助。

【问题讨论】：

如果移动太快，将 2500 增加到 5000（5 秒）左右。

标签： javascript html slideshow

【解决方案1】：

您可以通过对代码进行以下更改来做到这一点

setTimeout(slideit(),10000);

而不是

setTimeout(slideit(),2500);

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

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

【讨论】：

将字符串而不是函数传递给 setTimeout() 会遇到与使用 eval 相同的危险。 Refer Doc here under Passing string literals
@JJPA 和@gp：问题不在于幻灯片的速度，而在于融合或褪色从一个图像到下一个。变化来得太突然。我希望它们逐渐顺利地发生
请相应地更新问题并检查我的答案。

【解决方案2】：

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

动画不透明度为 0（淡出），
更换图片，
将不透明度设置为 1（淡入）

或编写您自己的动画逻辑以在不使用 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/

【讨论】：

你的 jsfiddle 结果就是我想要的。如何让褪色运行得更慢？我已经更改了我的代码，但它不起作用。我究竟做错了什么？这是使用 jquery 的：<script type="text/javascript"> var step = 1; var $slide = $(document.images.slide); function slideit() { $slide.fadeOut(function () { document.images.slide.src = eval("image" + step + ".src"); $slide.fadeIn(function () { if (step < 12) step++; else step = 1; setTimeout(slideit, 5000); }); }) } slideit(); </script> 谢谢！
api.jquery.com/fadein 设置fadeIn和fadeOut的自定义时间。对于 eval，由于您只设置图像 url（字符串），为什么不将 url 放入数组中并使用基于 0 的索引从数组访问，例如imageurls[step-1]
另一件事：我检查了 JJPA 昨天发布的链接（见上文），他们敦促程序员避免使用 eval()，说它（可能）危险: 替代语法中的代码是您希望在延迟毫秒后执行的代码字符串（不推荐使用此语法，原因与使用 eval() 相同）。我想更换它，但不知道用什么代替。
首先，如果使用数组，则不需要 eval。其次， eval 是邪恶的，但在你的情况下，因为你没有 evaluating 任何可能造成任何损害的用户输入，它在这里仍然是安全的。但这里不需要，所以避免。
“为什么不将 url 放入一个数组中，然后使用基于 0 的索引从数组中访问”。我希望我能完全靠自己完成这一切，但不幸的是，在编程方面，我还是个新手。新年快乐！