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()JavaScript を使用して、. それに加えて、遷移に必要な時間が経過したかどうかを追跡するためのステータス変数。そうでない場合は、を呼び出すことはできません。それがコツです。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

あなたがする必要があるのは、アニメーションがすでに進行中の場合、アニメーションが発生しないようにすることです。これを行う 2 つの方法:

  1. if( ! animation is going ){ } のようなものが JavaScript にラップされています。

  2. アニメーションの実行中に next.prev ボタンを無効にします。

jQueryでこれを行う方法を教えてもらえますが、ネイティブのjavascriptで行うのは難しいですが、原則は健全です...

于 2013-09-19T20:24:00.580 に答える