将DIV组合在一起滑动或淡入淡出

Question

我想用Jquery/Javascript将DIV组与DIV一起滑动或淡入淡出。我对客户端脚本非常陌生。任何帮助将不胜感激

<div class="slideshow"> 
    <div id="slide1"> 
     <div style="float: left; position: relative; width: 100px; height: 50px;"> 
      <p>One</p>     
     </div> 
      <div style="float: left; position: relative; width: 100px; height: 50px;"> 
       <p>Two</p>     
      </div>    
     </div> 
    <div id="slide2"> 
     <div style="float: left; position: relative; width: 100px; height: 50px;"> 
      <p>Three</p>      
     </div> 
     <div style="float: left; position: relative; width: 100px; height: 50px;"> 
      <p>Four</p>     
     </div>   
    </div> 
    <div id="slide3"> 
     <div style="float: left; position: relative; width: 100px; height: 50px;"> 
      <p>Five</p>     
     </div> 
     <div style="float: left; position: relative; width: 100px; height: 50px;"> 
      <p>Six</p>     
     </div>    
    </div> 
</div> 

我想slide1，slide2，和slide3幻灯片或淡入和逐出。 这里是我的尝试： http://jsfiddle.net/ws46wfx9/

Answer 1

CSS：

.slideshow{ position: relative; } 
.slide{ 
    top:0; 
    left:0; 
    position: absolute; 
    display:none; 
} 

HTML：

<div class="slideshow"> 
      <div class="slide" id="slide1"> 
       <div style="float: left; position: relative; width: 100px; height: 50px;"> 
        <p>One</p>     
       </div> 
       <div style="float: left; position: relative; width: 100px; height: 50px;"> 
        <p>Two</p>     
       </div>    
      </div> 
      <div class="slide" id="slide2"> 
       <div style="float: left; position: relative; width: 100px; height: 50px;"> 
        <p>Three</p>      
       </div> 
       <div style="float: left; position: relative; width: 100px; height: 50px;"> 
        <p>Four</p>     
       </div>   
      </div> 
      <div class="slide" id="slide3"> 
       <div style="float: left; position: relative; width: 100px; height: 50px;"> 
        <p>Five</p>     
       </div> 
       <div style="float: left; position: relative; width: 100px; height: 50px;"> 
        <p>Six</p>     
       </div>    
      </div> 
     </div> 

JQ：

var i=0, 
    slides=$('.slide'), 
    max=slides.length; 

    function slideShow(){ 
     $(slides[i]).fadeIn(300, function(){ 
      setTimeout(function(){ 
       $(slides[i]).fadeOut(300); 
       if (i==(max-1)){ 
        i=0 
       } else { 
        i++; 
       } 
       slideShow();    
      }, 1000); 
     }) 
    } 
    slideShow() 

DEMO

V2幻灯片。

HTML：

<div class="slideshow"> 
    <div class="slide active" id="slide1"> 
     <div style="float: left; position: relative; width: 100px; height: 50px;"> 
      <p>One</p>     
     </div> 
     <div style="float: left; position: relative; width: 100px; height: 50px;"> 
      <p>Two</p>     
     </div>    
    </div> 
    <div class="slide" id="slide2"> 
     <div style="float: left; position: relative; width: 100px; height: 50px;"> 
      <p>Three</p>      
     </div> 
     <div style="float: left; position: relative; width: 100px; height: 50px;"> 
      <p>Four</p>     
     </div>   
    </div> 
    <div class="slide" id="slide3"> 
     <div style="float: left; position: relative; width: 100px; height: 50px;"> 
      <p>Five</p>     
     </div> 
     <div style="float: left; position: relative; width: 100px; height: 50px;"> 
      <p>Six</p>     
     </div>    
    </div> 
</div> 

CSS：

.slideshow{ 
    position: relative; 
    width:300px; 
    height:300px; 
    overflow:hidden; 
} 
.slide{ 
    top:0; 
    width:100%; 
    left:0; 
    position: absolute; 
    -moz-transform: translateX(100%); 
    -webkit-transform: translateX(100%); 
    -o-transform: translateX(100%); 
    -ms-transform: translateX(100%); 
    transform: translateX(100%); 
} 
.slide:nth-child(1){background:#ccc;} 
.slide:nth-child(2){background:#c00;} 
.slide:nth-child(3){background:#eee;} 

.slide.active{ 
    -moz-transform: translateX(0); 
    -webkit-transform: translateX(0); 
    -o-transform: translateX(0); 
    -ms-transform: translateX(0); 
    transform: translateX(0); 
    -webkit-transition: all 300ms ease-out; 
    -moz-transition: all 300ms ease-out; 
    -ms-transition: all 300ms ease-out; 
    -o-transition: all 300ms ease-out; 
    transition: all 300ms ease-out; 
} 
.slide.prevSlide{ 
    -moz-transform: translateX(-100%); 
    -webkit-transform: translateX(-100%); 
    -o-transform: translateX(-100%); 
    -ms-transform: translateX(-100%); 
    transform: translateX(-100%); 
    -webkit-transition: all 300ms ease-out; 
    -moz-transition: all 300ms ease-out; 
    -ms-transition: all 300ms ease-out; 
    -o-transition: all 300ms ease-out; 
    transition: all 300ms ease-out; 
} 

JQ：

var i=0, 
    slides=$('.slide'), 
    max=slides.length; 

    function slideShow(){ 
     $(slides[i]).addClass('prevSlide').removeClass('active'); 
     if (i==(max-1)){ 
      i=0 
     } else { 
      i++; 
     } 
     $(slides[i]).addClass('active'); 
     setTimeout(function(){ 
      $(slides).removeClass('prevSlide'); 
      slideShow();   
     }, 3000) 
    } 
    slideShow() 

DEMO