Javascript 如何降低html中图像幻灯片的播放速度？_Javascript_Html_Slideshow

Javascript 如何降低html中图像幻灯片的播放速度？

javascript html

Javascript 如何降低html中图像幻灯片的播放速度？,javascript,html,slideshow,Javascript,Html,Slideshow,为了寻找一种（简单的）为我的网站创建幻灯片的方法，我在这里发现了以下问题：。我借用了（修改过的）代码，根据我的需要进行了修改，现在我得到了我想要的，但是图像之间的转换太快了。这不是关于幻灯片的速度，而是从一个图像到下一个图像的混合或淡入。变化来得太突然了。我希望它们能逐渐顺利地发生。我可以向它添加什么，或者如何更改它以降低速度？这是： <head> <script type="text/javascript"> var image1 = new Image() image

为了寻找一种（简单的）为我的网站创建幻灯片的方法，我在这里发现了以下问题：。我借用了（修改过的）代码，根据我的需要进行了修改，现在我得到了我想要的，但是图像之间的转换太快了。这不是关于幻灯片的速度，而是从一个图像到下一个图像的混合或淡入。变化来得太突然了。我希望它们能逐渐顺利地发生。我可以向它添加什么，或者如何更改它以降低速度？这是：

<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>


var image1=新图像（）
image1.src=“images/pentag.jpg”
var image2=新图像（）
image2.src=“images/promo.jpg”

var阶跃=1；
函数slideit（）
{
document.images.slide.src=eval（“image”+step+“.src”）；
如果（步骤您可以通过在代码中执行以下更改来实现
setTimeout(slideit(),10000);

而不是
setTimeout(slideit(),2500);

这里2500表示2.5秒，10000表示10秒，根据需要您可以使用任何参数
希望这可以解决您的问题。
根据您的评论，您希望显示图像更改之间的转换，然后使用jquery并按顺序执行此操作：
将不透明度设置为0（淡出）
改变形象
将不透明度设置为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);
        });
    })
}

var$slide=$（document.images.slide）；
函数slideit（）{
//淡出最后一个图像。
$slide.fadeOut（函数（）{
document.images.slide.src=eval（“image”+step+“.src”）；
//更改图像后，淡入新图像。
$slide.fadeIn（函数（）{
如果（步骤<2）步骤++；
否则步骤=1；
//一切都完成了…现在运行下一张幻灯片的计时器。
设置超时（slideit，5500）；
});
})
}

jsfiddle:
如果移动太快，则将2500增加到5000（5秒）左右与使用eval有着相同的危害。@JJPA和@gp：问题不在于幻灯片放映的速度，而在于从一幅图像到下一幅图像的混合或淡出。更改来得太突然。我希望它们逐渐平滑地发生。请相应地更新问题，并检查我的答案。你的JSFIDLE结果就是我想要的。如何n一个使淡入淡出运行得更慢？我已经更改了代码，但它不起作用。我做错了什么？下面是使用jquery：var step=1；var$slide=$（document.images.slide）；函数slideit（）{$slide.fadeOut（函数（）{document.images.slide.src=eval（“image”+step+.src”）；$sliden.fadeIn（函数（）{if（step<12）step++；else step=1；setTimeout（slideit，5000）；}）；}）slideit（）；
谢谢！设置淡入淡出和淡出的自定义计时。对于eval，因为您只设置图像url（字符串），为什么不将URL放在一个数组中，并使用基于0的索引从数组进行访问，例如imageURL[step-1]
另一件事：我检查了昨天发布的JJPA链接（见上文），他们敦促程序员避免使用eval（），说它（可能）危险：备用语法中的代码是要在延迟毫秒后执行的代码字符串（由于与使用eval（）相同的原因，不建议使用此语法）.我想替换它，但不知道该用什么代替。首先，如果你使用数组，你不需要eval。其次，eval是邪恶的，但在你的情况下，因为你没有评估任何可能造成任何损害的用户输入，所以在这里仍然是安全的。但这里不需要eval，所以请避免。“为什么不把URL放在一个数组中，并使用基于0的索引从数组中访问呢？”我希望我能完全靠自己完成这一切，但不幸的是，在编程方面，我还是个新手。新年快乐！