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

看起来过渡效果中的实际淡入/幻灯片已经由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秒。

您可以根据需要增加/减少2500个值，即2.5秒。并且1秒钟你需要将值更改为1000。

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

在滚动旁边改变转换速度

2 个答案: