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对象的变量使用$前缀（为了便于阅读）

<强>更新

这个按钮允许使用next和prev按钮，具有不同的延迟：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);
    });
});

动态运行一行img标签（图像滑块）

1 个答案: