更改滚动边秀中的过渡速度

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函数实际上是每2500即2.5秒）调用一次carousel功能。

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

对于CSS，您可以使用。 transition delay 2s

更改滚动边秀中的过渡速度

问题描述

2 个解决方案

解决方案1
0 已采纳 2017-09-30 01:55:28

解决方案2
0 2017-09-30 02:01:56

更改滚动边秀中的过渡速度

问题描述

2 个解决方案

解决方案1 0 已采纳 2017-09-30 01:55:28

解决方案2 0 2017-09-30 02:01:56

解决方案1
0 已采纳 2017-09-30 01:55:28

解决方案2
0 2017-09-30 02:01:56