改变滚动边秀的过渡速度

Question

我找到了一些我想使用的滚动幻灯片的代码，我想出了如何改变每张幻灯片停止时的持续时间，但不知道如何改变实际过渡的持续时间（部分幻灯片移入和移出的位置。我已将代码粘贴到此处。有人可以告诉我我需要在 js 中的哪个位置更改值吗？此外，仅使用 css 是否可以实现同样的效果，如果可以，可以有人解释一下吗？理想情况下我只想使用 css 因为我认为它会更简单并且我更熟悉它。谢谢。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
body {
    width: 960px;
    margin: 0 auto 0;
    }
</style>
</head>
<body>
<div class="w3-content w3-section" style="max-width:500px">
    <img class="mySlides w3-animate-left" src="https://www.bartonlewis.com/_imagesfilm/23rd_st.jpg" alt="Mountain" style="width:100%">
    <img class="mySlides w3-animate-left" src="https://www.bartonlewis.com/_imagesfilm/blue.jpg" style="width:100%">
    <img class="mySlides w3-animate-left" src="https://www.bartonlewis.com/_imagesfilm/broken_guru.jpg" style="width:100%">
    <img class="mySlides w3-animate-left" src="https://www.bartonlewis.com/_imagesfilm/church_ave.jpg" style="width:100%">
</div>  

<script>
var myIndex = 0;
carousel();
function carousel() {
    var i;
    var x = document.getElementsByClassName("mySlides");
    for (i = 0; i < x.length; i++) {
      x[i].style.display = "none";  
    }
    myIndex++;
    if (myIndex > x.length) {myIndex = 1}    
    x[myIndex-1].style.display = "block";  
    setTimeout(carousel, 2500);    
}
</script>
    </body>
</html>

Answer 1

看起来实际的 fade/slide 过渡效果已经由 CSS 动画处理，通过这种风格：

.w3-animate-left {
    position: relative;
    animation: animateleft 0.4s;
}

如果您在本地复制该样式，您应该能够覆盖它并增加持续时间，例如https://codepen.io/anon/pen/JrJeoB

Answer 2

在Javascript你需要改变， setTimeout(carousel, 2500); 这个Javascript函数实际上是在调用carousel 每 2500 运行一次，即 2.5 秒。

您可以 increase/decrease 您喜欢的 2500 个值，即 2.5 秒。对于 1 秒，您需要将值更改为 1000 。

和 css 您可以使用。 transition delay 2s

改变滚动边秀的过渡速度

change speed of transition in scrolling sideshow

javascript

transition

slideshow