javascript - 将一组 DIV 滑动或淡入淡出

Question

我想使用 Jquery/Javascript 滑动或淡出一组 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