простое слайдшоу jQuery с использованием addClass / removeClass и CSS Transitions

Question

Я пытаюсь сделать самое простое слайдшоу jQuery возможный. Я сделал следующую скрипку, чтобы показать мой прогресс

Кажется, я не могу обернуть голову, одновременно снимая и добавление классов для достижения желаемого эффекта

проверить это:

http://jsfiddle.net/whiteb0x/pMMa8/

Answer 1

Вот код, который работает с использованием переходов CSS3:

$(document).ready(function() {

function play() {
    setInterval(function(){
        var next = $(".ad .active").removeClass("active").next("img");
        if (!next.length) {
            next = $(".ad img:first");
        }
        next.addClass("active");
    }, 3000);
}
play();

});

И рабочий jsFiddle: http://jsfiddle.net/jfriend00/8frVL/

Примечание: это только добавляет / удаляет класс.Для этого не нужно менять положение изображений в DOM (как вы это делали).

Используя этот CSS:

.ad {
    height:300px; 
    width:250px; 
    margin:0 1em 1em 0; 
    position:relative;
}

.ad img {
    position: absolute;
    transition:opacity 1s linear; 
    -moz-transition:opacity 1s linear; 
    -webkit-transition:opacity 1s linear;
}

.ad img {
    opacity: 0; 
}

.ad img.active{
    opacity: 1;
}

Answer 2

Ну ... если вы ищете простейшее слайд-шоу из когда-либо , посмотрите это, которое я написал некоторое время назад: http://jsfiddle.net/KeesCBakker/uvWJE/

Довольно просто.

Html:

<ul>
    <li><img src="http://farm1.static.flickr.com/134/328919543_a01d511076_z.jpg"/></li>
    <li><img src="http://farm1.static.flickr.com/138/328919326_6b16bce915_z.jpg"/></li>
    <li><img src="http://farm1.static.flickr.com/142/328917731_13472ed905_z.jpg"/></li>
</ul>

Css:

li  { display:inline-block; width:500px; } 
img { width:100%; }   
ul  { height:300px; overflow:hidden; }

JQuery:

var $ul = $('ul');

$('li:not(:first)', $ul).fadeOut();

window.setInterval(function(){        

   $('li:first').fadeOut(
        function(){
            $ul.append($(this));
            $('li:first').fadeIn();   
        }
    );
}, 4000);