(Better) Shortest jQuery Slideshow Plugin

Eliminates DOM reflow/relayout

by mpetrovich

HTML

<ul class="slideshow">
    <li class="selected"><img src="http://ayiuser-a.akamaihd.net/017/834/792/b1348373652.jpg" width="114" height="114" alt=""></li>
    <li><img src="http://ayiuser-a.akamaihd.net/144/808/759/b1342198862.jpg" width="114" height="114" alt=""></li>
    <li><img src="http://ayiuser-a.akamaihd.net/178/060/220/b1356548053.jpg" width="114" height="114" alt=""></li>
    <li><img src="http://ayiuser-a.akamaihd.net/176/722/449/b1354251662.jpg" width="114" height="114" alt=""></li>
</ul>

CSS

.slideshow {
    position: relative;
    overflow: hidden;
    width: 114px;
    height: 114px;
}

.slideshow > * {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    
    -webkit-transition: 1s;
       -moz-transition: 1s;
            transition: 1s;
}

.slideshow > .selected {
    opacity: 1;
}

JavaScript

$.fn.cycle = function(delay) {
    var $container = this,
        slides = this[0].children,
        i = 0,
        count = slides.length;

    setInterval(function() {
        $(slides[i]).removeClass("selected");
        i = (i + 1) % count;
        $(slides[i]).addClass("selected");
    }, delay);
};
$(".slideshow").cycle(1000);