如何使div內的幻燈片，而不是圖像？

Question

我想用JavaScript做一個幻燈片，但我只知道如何做到這一點與幾個圖像裏面，但對我的網站，我需要做幻燈片放映，我可以把div？

我只需要兩張幻燈片，每張幻燈片中都有3個div，左側有兩張幻燈片。

HTML

<div id="container" class="cont2"> 

     <div id="box1" class="box">Div #1<div class="kkc"><p>Div Caption1</p></div></div> 
     <div id="box2" class="box">Div #2<div class="kkc"><p>Div Caption2</p></div></div> 
     <div id="box3" class="box">Div #3<div class="kkc"><p>Div Caption3</p></div></div> 

CSS

#container { 
position: absolute; 
margin: 0px; 
padding: 0px; 
height: 304px; 
width: 500px; 
overflow: hidden; 
background-color: white; 
margin-top: 78px; 
margin-left: 124px; 
z-index: -1; 
} 

.box { 
position: absolute; 
width: 50%; 
height: 300px; 
line-height: 300px; 
font-size: 50px; 
text-align: center; 
border: 2px solid black; 
left: 50%; 
top: 0px; 
margin-left: -25%; 
z-index: -1; 
cursor: pointer; 
} 

#box1 { 
background-color: green; 
left: -150%; 

} 


#box2 { 
background-color: yellow; 
left:50%; 
} 

#box3 { 
background-color: red; 
left: 150%; 


} 

的Javascript

$(document).ready(function(){ 
var refreshId; 
var restartAnimation = function() { 
    clearInterval(refreshId); 
    refreshId = setInterval(function() 
    {  
     $('.box').each(function() { 
      if ($(this).offset().left < 0) { 
       $(this).css("left", "150%"); 
      } else if ($(this).offset().left > $('#container').width()) { 
       $(this).animate({ 
        left: '50%' 
       }, 500); 
      } else { 
       $(this).animate({ 
        left: '-150%' 
       }, 500); 
      } 
     }); 
    },1000); 
} 

restartAnimation() 


}); 

我已經嘗試這一點，但它不工作。

Answer 1

JS：

function Divs() { 
    var divs= $('#parent div'), 
     now = divs.filter(':visible'), 
     next = now.next().length ? now.next() : divs.first(), 
     speed = 1000; 

    now.fadeOut(speed); 
    next.fadeIn(speed); 
} 

$(function() { 
    setInterval(Divs, 1400); 
}); 

CSS：

#parent div { 
    display:none; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 
#parent div:first-child { 
    display:block; 
} 
div{background:red} 

#parent > div{ 
    width:400px; 
    height:250px; 
} 

HTML：

<div id="parent"> 

     <div id="box1" class="box">Div #1</div> 
     <div id="box2" class="box">Div #2</div> 
     <div id="box3" class="box">Div #3</div> 
</div> 

here is a Js Fiddle example