製作css自動滑塊

Question

我找到了this 3D立方體動畫滑塊。這個滑塊的問題是它需要點擊才能看到下一張圖片。我想要自動silder。所有4張圖像應自動滑動，當圖像爲4時，下一張圖像將再次爲圖像1。

$("#controls").on('click', 'span', function(){ 
    $(".cubeSpinner").css("transform","rotateY("+($(this).index() * -90)+"deg)"); 
}); 

我是編程新手。任何人都可以幫助我如何定製這使得它自動滑塊而不點擊圖像？

Answer 1

試試這個。

http://jsfiddle.net/K99GS/21/

你的JavaScript更改了這一點。

var index = 0; 
setInterval(function(){ 
    if(index==3) 
     index = 0; 
    $(".cubeSpinner").css("transform","rotateY("+(index * -90)+"deg)"); 
    index++; 
},1500); 

Answer 2

另一種方法是觸發點擊。

var count=0; 
    var len = $('#controls span').length; 

    setInterval(function(){ 
     if(count === len){ 
      count = 0; 
     } 
     $('#controls span').eq(count).trigger('click'); 
     count++; 
    }, 5000); 

Fiddle