이미지가 아닌 div가 포함 된 슬라이드 쇼를 만드는 방법은 무엇입니까?

Question

자바 스크립트로 슬라이드 쇼를 만들고 싶지만 그 안의 몇 가지 이미지로만하는 방법을 알고 있습니다.하지만 웹에서 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%; 


} 

자바 스크립트

$(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