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

您可以使用 JavaScriptsetInterval()在设定的时间后重复调用轮播动画函数，而不是让按钮点击触发动画函数。

请注意，单击按钮时，将向该函数传递一个值，该函数确定旋转木马旋转的方向。这是通过事件对象传递的，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 回答