文章/答案/技术大牛

发布

社区首页 >问答首页 >滚动边道过渡的变化速度

问滚动边道过渡的变化速度
EN

Stack Overflow用户

提问于 2017-09-30 01:41:59

回答 2查看 307关注 0票数 0

我找到了一些滚动幻灯片的代码，我想要使用这些代码，我想出了如何在每一张幻灯片静止时改变它的持续时间，但不知道如何更改实际过渡的持续时间(幻灯片进出的部分)。我把密码粘在这里了。有人能告诉我在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

回答 2

Stack Overflow用户

回答已采纳

发布于 2017-09-30 01:55:28

看起来实际的渐变/幻灯片过渡效果已经被CSS动画处理了，通过这种风格：

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

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

票数 0

Stack Overflow用户

发布于 2017-09-30 02:01:56

在Javascript中，您需要更改，setTimeout(carousel, 2500);这个Javascript函数实际上是每一个2500调用一个2.5秒。

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

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/46498800

复制

相似问题

问滚动边道过渡的变化速度
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问滚动边道过渡的变化速度EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问滚动边道过渡的变化速度
EN