0

「次へ」および「前へ」ボタンで現在制御されている 3D 回転カルーセルを作成しました。ボタンを削除し、5 秒ごとに次の画像に移行するように、カルーセルをタイマーで自動的に回転させたいと考えています。

私はさまざまなことを試してきましたが、コードを壊し続けています。元の途切れのないコードを以下に貼り付けます。ご協力いただきありがとうございます。

<!doctype html>
<html lang="en" class=" js csstransforms3d"><head>
<meta charset="utf-8">

<!-- disable zooming -->
<meta name="viewport" content="initial-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="carousel.css" media="screen">

<script src="carousel.js"></script>
<script>

    var init = function() {
        var carousel = document.getElementById('carousel'),
            navButtons = document.querySelectorAll('#navigation button'),
            panelCount = carousel.children.length,
            transformProp = Modernizr.prefixed('transform'),
            theta = 0,

            onNavButtonClick = function( event ){
                var increment = parseInt( event.target.getAttribute('data-increment') );
                theta += ( 360 / panelCount ) * increment * -1;
                carousel.style[ transformProp ] = 'translateZ( -115px ) rotateX(' + theta + 'deg)';
            };

        for (var i=0; i < 2; i++) {
            navButtons[i].addEventListener( 'click', onNavButtonClick, false);
        }

    };

    window.addEventListener( 'DOMContentLoaded', init, false);  
</script>

<body class=" ready">

    <section class="container">
        <div id="carousel" style="-webkit-transform: translateZ(-115px) rotateX(0deg);">

            <figure style="opacity: 1; -webkit-transform: rotateX(0deg) translateZ(115px);">
                <img src="image1.png">
            </figure>

            <figure style="opacity: 1; -webkit-transform: rotateX(120deg) translateZ(115px);">
                <img src="image2.png">
            </figure>

            <figure style="opacity: 1; -webkit-transform: rotateX(240deg) translateZ(115px);">
                <img src="image3.png">
            </figure>

        </div>
    </section>

    <section id="options">

        <p id="navigation">
            <button id="previous" data-increment="-1">Previous</button>
            <button id="next" data-increment="1">Next</button>
        </p>

    </section>

<footer>
</footer>

</body>
</html>
4

1 に答える 1

1

ボタンのクリックでアニメーション機能をトリガーする代わりに、 JavaScript を使用setInterval()して、一定時間後にカルーセル アニメーション機能を繰り返し呼び出すことができます。

ボタンのクリックで、カルーセル スピンの方向を決定する値がその関数に渡されることに注意してください。これはイベント オブジェクトを介して渡されevent.target.getAttribute('data-increment')、ボタン クリック イベントを無効にすると使用できなくなります。おそらくカルーセルを一方向にのみ進めるため、この値はもう必要ないと思います。そのため、その行全体を削除して、次の行を固定された前方に変更できます。

theta += ( 360 / panelCount ) * -1;

setInterval()これは、ボタン コードを削除して行を追加して、スクリプト ブロック全体を書き直したものです。onNavButtonClickに改名carouselAdvance:

<script>
var init = function() {
    var carousel = document.getElementById('carousel'),
        navButtons = document.querySelectorAll('#navigation button'),
        panelCount = carousel.children.length,
        transformProp = Modernizr.prefixed('transform'),
        theta = 0,
        carouselDelay = 5000,

        carouselAdvance = function( event ){
            theta += ( 360 / panelCount ) * -1;
            carousel.style[ transformProp ] = 'translateZ( -115px ) rotateX(' + theta + 'deg)';
        },
        carouselInterval = setInterval(carouselAdvance, carouselDelay);
};

window.addEventListener( 'DOMContentLoaded', init, false);

于 2013-09-16T15:24:25.093 に答える