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

【问题标题】：change speed of transition in scrolling sideshow更改滚动边秀中的过渡速度
【发布时间】：2017-09-30 01:41:59
【问题描述】：

我找到了一些我想使用的滚动幻灯片的代码，我想出了如何改变每张幻灯片静止时的持续时间，但不知道如何改变实际过渡的持续时间（滑动进出。我在这里粘贴了代码。有人可以告诉我我需要在 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>

【问题讨论】：

标签： javascript slideshow transition

【解决方案1】：

看起来实际的淡入淡出/滑动过渡效果已经由 CSS 动画处理，通过这种样式：

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

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

正如我在回答中指出的那样，该样式当前正在使用 CSS 动画 - 也请注意向其添加 CSS 过渡（您当然可以使用过渡来实现相同的效果，但您会可能想要覆盖现有的动画样式，这样您就不会在同一元素上同时出现两种效果 - 对性能不利并且可能看起来很奇怪）。
谢谢。我不清楚是什么对效果负责 - js 或 css - 因为我复制的代码包含 js。 js在这里做什么？还有其他一些我想调整的东西，比如过渡的不透明度，我不喜欢。由于 css 没有显示在样式表中，并且当我访问该链接时，它只是一个不以任何可读方式显示的代码页面，我不知道如何访问或编辑 css。你能告诉我如何访问css以便我可以修改它吗？非常感谢，巴顿