动态遍历一行img标签（图片滑块）

Question

首先对不起我的英语不好，

我正在尝试制作一个简单的全屏动态图像滑块，稍后会添加其他功能。这个想法是每 x 秒显示下一个图像标签，并到达最后一个标签，再次从第一个开始。

我唯一的问题是我不知道如何在一行标签中显示下一个图像标签而不每次都命名它的类，这不会太动态。

例子：

<div id="image_container">
    <img src="img/image1.jpg"/>
    <img src="img/image2.jpg"/>
    <img src="img/image3.jpg"/>
    <img src="img/image4.jpg"/>
</div>

对于图像标签的 css，我只是将显示设置为无，并将不透明度设置为 0，以便能够通过动画淡入图像。

到目前为止我用过的JS代码：

$(window).load(function(){

    $( "#image_container img" ).first().css( {"display":"block" } );
    $( "#image_container img" ).first().animate( {"opacity":"1" }, 2000 );
    $( "#image_container img" ).first().animate( {"opacity":"0" }, 2000 );

    $( "#image_container img" ).next().delay( 4000 );

    $( "#image_container img" ).next().css( {"display":"block" } );
    $( "#image_container img" ).next().animate( {"opacity":"1" }, 2000 );
    $( "#image_container img" ).next().animate( {"opacity":"0" }, 2000 );
});

这个js代码明显是错误的，根本不能正常工作……

任何帮助都会很棒，因为我只是一年级学生，对 jquery 没有太多经验。

Answer 1

类似这样的：http://jsfiddle.net/by8zz22s/1/

// Shortcut DOM ready handler
$(function(){
    // Avoid calling same selector multiple times - faster to reuse it
    var $image_container = $('#image_container');

    $image_container.children().first().addClass('active').fadeIn(2000);

    setInterval(function(){
        var $current = $image_container.children('.active');
        var $next = $current.next('img');
        if (!$next.length){
            $next = $image_container.children().first();
        }
        $current.removeClass('active').fadeOut(2000, function(){
            $next.fadeIn(2000).addClass('active');
        });
    }, 4000);

});

注意事项：

• $(function(){是$(document).ready(function{的快捷方式，比使用$(window).load(更可取
• 它使用setInterval 生成重复事件。
• 它使用一个类来识别当前图像。这是动态添加和删除的。
• 如果没有下一个图像，它会简单地换到第一个图像。
• 我对包含 jQuery 对象的变量使用 $ 前缀（为了便于阅读）

更新：

这个允许下一个和上一个按钮，具有不同的延迟：http://jsfiddle.net/by8zz22s/5/

$(function () {
    // Avoid calling same selector multiple times - faster to reuse it
    var $image_container = $('#image_container');

    $image_container.children().first().addClass('active').fadeIn(2000);

    // Function to show the next or previous image with transition    
    var updateDisplay = function (forward, delay) {

        clearInterval(timer);
        var $current = $image_container.children('.active');
        var $next = forward ? $current.next('img') : $current.prev('img');
        if (!$next.length) {
            $next = forward ? $image_container.children().first() : $image_container.children().last();
        }
        $current.removeClass('active').fadeOut(delay, function () {
            $next.fadeIn(delay).addClass('active');
        });
        // Start a new timout
        timer = setTimeout(function(){
            updateDisplay(forward, delay);
        }, 4000);
    };

    // Do initial interval with fade if delay of 2 seconds
    var timer = setTimeout(function () {
        updateDisplay(true, 2000);
    }, 4000);

    $('.button_next').click(function () {
        // Fast transition forwards
        updateDisplay(true, 200);
    });
    $('.button_previous').click(function () {
        // Fast transition backwards
        updateDisplay(false, 200);
    });
});