Question

我有这个HTML：

<div class="rotator">
<img src="../images/photos/DSC02625.jpg"/>
<img src="../images/photos/IMG_4825.jpg"/>
<img src="../images/photos/IMG_4869.jpg"/>
</div>

使用jQuery 1.3.2创建简单图像旋转器的最简单方法是什么？

我不想使用插件......

褪色很不错。

谢谢：）

Answer 1

var $rotator = $(".rotator");
$rotator.find("img:gt(0)").hide();
setTimeout(Rotate, 1000);

function Rotate() {
    var $current = $rotator.find("img:visible");
    var $next = $current.next();
    if ($next.length == 0) $next = $rotator.find("img:eq(0)");
    $current.hide();
    $next.show();
    setTimeout(Rotate, 1000);
}

示例：http://jsfiddle.net/hunter/LMw6F/

Answer 2

我做了一些更新......用CSS重叠fadeOut和fadeIn进行绝对定位......

$(document).ready(function () {

    var $rotator = $(".rotator");
    $rotator.find("img:gt(0)").hide();
    setTimeout(Rotate, 3000);

    function Rotate() {
        var $current = $rotator.find("img:visible");
        var $next = $current.next();
        if ($next.length == 0) $next = $rotator.find("img:eq(0)");
        $current.fadeOut(1000);
        $next.fadeIn(1000);
        setTimeout(Rotate, 3000);
    }

});

示例： http://jsfiddle.net/LMw6F/439/

Answer 3

查看this question下的一些示例代码。但要注意接受的答案，它不会做你想要的。

Answer 4

很棒的一小段代码。我遇到的两个问题：一，我需要链接图像，并将它们包装在一个href标签中会破坏代码。修复是将每个图像和链接包装在div标记中并将该函数指向该标记。我还想使用fadeIn / Out来实现更柔和的过渡：

$current.fadeOut(1000);
$next.fadeIn(1000);

这似乎工作正常，直到我在资源管理器中查看它。我使用绝对定位来保持图像堆叠在一起，但事实证明 - facepalm - 猜怎么着？没有版本的Explorer支持在绝对定位元素上淡入淡出。在没有绝对定位的情况下进行的各种尝试都涉及使图像在新图像淡入并且旧图像淡出时令人不安地跳跃。最终工作的修复是使用回调函数仅在fadeOut完成时触发fadeIn。这是我提出的解决方案：

$(document).ready(function () {

    var $rotator = $(".rotator");
    $rotator.find("div:gt(0)").hide();
    setTimeout(Rotate, 6000);

    function Rotate() {
        var $current = $rotator.find("div:visible");
        var $next = $current.next();
        if ($next.length == 0) $next = $rotator.find("div:eq(0)");
        $current.fadeOut(1000, function() {
            $next.fadeIn(1000); 
        });
        setTimeout(Rotate, 6000);
    }

});

使用jQuery 1.3.2的简单图像旋转器

4 个答案: