1

javascript / html 片段：

<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;
}

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

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

4

2 回答 2

0

这是解决方案。在fiddle_demo

在setTimeout()执行. _ _ _ _ 除此之外，还有一个状态变量来跟踪过渡所需的时间是否已经过去。如果没有则无法调用。这就是诀窍。nextImage()onclicknextImage()

使用此代码-

<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>

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

于 2013-09-19T20:50:04.110 回答
0

如果动画已经在进行中，您需要做的是防止动画发生。这样做的两种方法：

  1. 像 if( ! 动画正在发生 ){ } 之类的东西围绕着你的 javascript。

  2. 在动画发生时禁用 next.prev 按钮。

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

于 2013-09-19T20:24:00.580 回答