我該如何自動旋轉此傳送帶？

我跟着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>

來源

2016-02-10 newbie

使用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);

來源

2016-02-10 08:14:26 budirec

爲什麼旋轉越來越快，我想自動旋轉瓦特/使用 – newbie

您可以從3000區間更改爲10000（它以毫秒爲單位）是的，你不需要使用此按鈕，按鈕，只是把你的代碼加載函數 – budirec

嗨，先生你好我可以問我怎麼可以添加一個按鈕比以前的旋轉自動旋轉先生其如此真棒：D – newbie

我該如何自動旋轉此傳送帶？

回答

相關問題