CSS / JavaScript过渡:如果图像快速更改，我的CSS过渡不适用于图库

css / javascript transition: my css transitions not working with the gallery if image quickly changes

本文关键字：CSS 我的 不适用 适用于 过渡 JavaScript 如果 图像      更新时间：2023-09-26

javascript/html snippet：

<script>
        var backgroundImages = new Array(); // create an array holding the links of each image
        var backgroundImages = [
            "style/images/bg0.png",
            "style/images/bg1.png",
            "style/images/bg2.png",
            "style/images/bg3.png",
            "style/images/bg4.png",
            "style/images/bg5.png",
            "style/images/bg6.png",
        ];
        var ImageCnt = 0;
        function nextImage(direction) // this should take into account the current value (starts at 3) and determines whether a higher or lower value should be returned based on the direction
        {
            ImageCnt = (ImageCnt + (direction == "left" ? backgroundImages.length-1 : 1)) % backgroundImages.length;
            document.getElementById("body-1").style.background = "url('"+backgroundImages[ImageCnt]+"')";//put's the new background together for rendering by using the returned value from nextImage()
        }
</script>
<div class="body-1" id="body-1"><!-- begin body 1 :: this will hold the topmost image slider -->
    <div class="transition" id="trans-left" onclick='nextImage("left");return false;'><!-- begin transition left :: this will take advantage of rotation to use the same loaded image for both the left and right arrows -->
        <img src="images/transition.png"/>
    </div><!-- end transition left -->
    <div class="transition" id="trans-right" onclick='nextImage("right");return false;'><!-- begin transition right :: this will take advantage of rotation to use the same loaded image for both the left and right arrows -->
        <img src="images/transition.png"/>
    </div><!-- end transition right -->
</div>

这是涉及的 CSS，它相对简单：

.body-1
{
    margin-top: -50px;
    padding: 0px;
    width: 100%;
    height: 470px;
    background-color: #ebf6f7;
    background-image: url('images/bg3.png');
    background-size: 100% 470px;
    transition: background-image 2s;
    overflow: hidden;
}
图像

在我的图像数组中正确循环，但如果用户转换的速度快于转换有时间完成，则转换不会生效。

有人在这里有修复的想法吗？

这是解决方案。 在fiddle_demo

我在执行nextImage()时使用了 JavaScript 的setTimeout()来计算这里的幻灯片传输时间（即 2 秒）。除此之外，还有一个状态变量，用于跟踪传输所需的时间是否已过。如果不是，那么onclick不能打电话给nextImage()。这就是诀窍。

使用此代码-

<script>
    status=0;
        var backgroundImages = new Array(); // create an array holding the links of each image
        var backgroundImages = [
            "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQ1nZVCpqazRlfrHxxFkCegMnVN5YQcwd9wucAwCbPlyHdRcuIw51Y877-H",
            "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQfCDIMnT0a9eLueandJ127Cmo-ZXpBhch83tmhWfAu5EA4uZZimnIv9c0",
            "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcS6KEBXB2afWZN9EimiM7rf-ap8M8I8gxc02N9hyS0L98WxG6EVwoLfGhU",
            "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSNdmylPtmOnRNG14qWjBhPGu949eld0JnUqgFdREQVEnH8TxvTQnlGQQw",
            "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSLS_jeHM1jbWzgHbVZJbEBWcrfnI1gbMjsqsS1d4Joxm6svO5_a90Y8wnE",
            "https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTrEES7eyR-rTSJeak-18JrCx-IKF1QJtzzlhihiLG5hwHQ-YT90prT-mc",
            "https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcT69YiOi2muMfySs4l-c7kIN-xoM_iJKWVh4sOKTOXmLSQkh_ZyfnPLe5g",
        ];
        var ImageCnt = 0;
        function nextImage(direction) // this should take into account the current value (starts at 3) and determines whether a higher or lower value should be returned based on the direction
        {
            status=1;
            ImageCnt = (ImageCnt + (direction == "left" ? backgroundImages.length-1 : 1)) % backgroundImages.length;
            document.getElementById("body-1").style.background = "url('"+backgroundImages[ImageCnt]+"')";//put's the new background together for rendering by using the returned value from nextImage()
            setTimeout('status=0;',2000);
        }
</script>
<div class="body-1" id="body-1"><!-- begin body 1 :: this will hold the topmost image slider -->
    <div class="transition" id="trans-left" onclick='if(status==0){nextImage("left");return false;}'><!-- begin transition left :: this will take advantage of rotation to use the same loaded image for both the left and right arrows -->
        <img src="images/transition.png"/>
    </div><!-- end transition left -->
    <div class="transition" id="trans-right" onclick='if(status==0){nextImage("right");return false;}'><!-- begin transition right :: this will take advantage of rotation to use the same loaded image for both the left and right arrows -->
        <img src="images/transition.png"/>
    </div><!-- end transition right -->
</div>

我认为这解决了你的问题。

您需要做的是防止动画在进行中时发生。有两种方法可以做到这一点：

  1. 类似 if（ ！ 动画正在发生 ）{ } 包裹在你的 JavaScript 周围的东西。

  2. 在动画发生时禁用下一个.prev按钮。

我可以告诉你如何在jQuery中做到这一点，但我很难在原生javascript中做到这一点，但原理是合理的......

相关文章：