如何自动旋转这个旋转木马？

Question

如何自动旋转这个旋转木马？

3

我该如何自动旋转这个轮播图？

我正在按照这个轮播图教程进行操作，但我不知道如何让它自动旋转。

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>

- newbie

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- budirec · Answer 1

使用 SetInterval。

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

设置间隔手册

如果您将您的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);