使用 addClass / removeClass 和 CSS 过渡的简单 jQuery 幻灯片答案

【问题标题】：simple jQuery slideshow using addClass / removeClass and CSS Transitions使用 addClass / removeClass 和 CSS 过渡的简单 jQuery 幻灯片
【发布时间】：2012-02-12 12:44:19
【问题描述】：

我正在尝试制作最简单的 jQuery 幻灯片可能的。我做了以下小提琴来展示我的进步

我似乎无法同时摆脱并添加类以达到预期的效果

检查一下：

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

【问题讨论】：

对不起，你想达到什么目的？就我而言，它有效。
嘿！看起来好像图像“弹出”然后淡入，看到了吗？
所以你想要更淡化的效果？
右 - 同时淡出和淡入 @ 同时

标签： jquery css slideshow css-transitions

【解决方案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;
}

【讨论】：

如果我的声誉更高，我会加 1 给你，非常感谢你

【解决方案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);

【讨论】：

我喜欢这个！它只需要使用 Css-transitions 来处理动画，同时使用 addClass/removeClass :/
这将非常非常非常非常棘手。此外，并非每个浏览器都支持这种转换。所以你可以使用toggleClass 而不是fadeIn / fadeOut。
是的，我知道我写的代码比这更疯狂——这件事让我在办公室里发疯：P