Question

如何自动旋转此轮播？

我正在关注this carousel tutorial，但我不知道如何自动旋转它。

jQuery的：

var items,length,deg,z,move = 0;

function rotate(direction)
{
    move += direction;

    for(var i = 0; i < length; i++)
    {
        items[i].style.transform = "rotateY("+(deg*(i+move))+"deg) translateZ("+z+"px)";
    }
}

function load()
{
    items = document.getElementsByClassName('item');
    length = items.length;

    deg = 360 / length;
    z = (items[0].offsetWidth / 2) / Math.tan((deg / 2) * (Math.PI / 180));

    for(var i = 0; i < length; i++)
    {
        items[i].style.transform = "rotateY("+(deg*i)+"deg) translateZ("+z+"px)";
    }
}

  window.addEventListener('load', load);

的CSS：

*
{
    box-sizing:border-box;
}
html ,body
{
    margin:0;
    padding:0;
    height:100%;
}
.carousel
{
    width:400px;
    height:200px;
    position:relative;
    top:50%;
    left:50%;
    transform:translateX(-50%) translateY(-50%);

    perspective:1000px;
    transform-style: preserve-3d;

}
.carousel .item
{
    width:100%;
    height:100%;
    position:absolute;

    border: 1px solid black;

    transition:transform 1s;
}

HTML：

<html>
    <head>
        <title>Practice</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="css.css">
    </head>
    <body>
        <div class="carousel">
            <div class="item"><img src="image/logo.jpg" style="height:199px; width:398px;"></div>
            <div class="item"><img src="image/slide1.jpg" style="height:199px; width:398px;"></div>
            <div class="item"><img src="image/slide2.jpg" style="height:199px; width:398px;"></div>
            <div class="item"><img src="image/slide3.jpg" style="height:199px; width:398px;"></div>
        </div>

        <button onclick="rotate(1)">Rotate</button>
        <script src="carousel.js"></script>
    </body>
</html>

Answer 1

使用SetInterval

setInterval(function(){ rotate(1); }, 3000);

Set Interval manual

如果你制作这样的js文件，它应该自动旋转，如果你点击按钮，旋转木马也会旋转。

var items,length,deg,z,move = 0;

function rotate(direction)
{
    move += direction;

    for(var i = 0; i < length; i++)
    {
        items[i].style.transform = "rotateY("+(deg*(i+move))+"deg) translateZ("+z+"px)";
    }
}

function load()
{
    items = document.getElementsByClassName('item');
    length = items.length;

    deg = 360 / length;
    z = (items[0].offsetWidth / 2) / Math.tan((deg / 2) * (Math.PI / 180));

    for(var i = 0; i < length; i++)
    {
        items[i].style.transform = "rotateY("+(deg*i)+"deg) translateZ("+z+"px)";
    }

    setInterval(function(){ rotate(1); }, 10000); //auto rotate every 10 seconds(10,000 miliseconds)
}

window.addEventListener('load', load);

我怎么能自动旋转这个旋转木马

1 个答案: