在我的JavaScript函数中添加自动幻灯片选项

时间:2013-11-23 12:18:50

标签: javascript jquery slide

我有幻灯片,当我点击prevnext按钮时,转到其他图片。一切都好。但我想在10秒内添加时间选项并自动滑动。

我的点击功能:

$(document).ready(function () {

        $(window).resize();

        $("#nav #prevslide").click(function () {
            ChangeBackground($("#backgrounds img.current"), -1);

        });

        $("#nav #nextslide").click(function () {

            ChangeBackground($("#backgrounds img.current"), 1);

        });

    });

function ChangeBackground(background, direction) {
    if (is_animating)
        return;
    is_animating = true;

    $background = $(background);
    $newItem = null;
    if (direction == -1) {
        $newItem = $background.prev();

        if ($newItem.length == 0) {
            $newItem = $("#backgrounds img").last();
        }
    } else {
        $newItem = $background.next();

        if ($newItem.length == 0) {
            $newItem = $("#backgrounds img").first();
        }
    }


    $background.fadeOut(300);
    $newItem.fadeIn(300, function () {
        $("#backgrounds img").removeClass("current");
        $newItem.addClass("current");
        is_animating = false;
    });

    $clone = $("div.item.current").clone();
    $clone.removeClass("current").addClass("new");
    $clone.find("h1").html($newItem.attr("alt"));
    $clone.find("h2").html($newItem.attr("data-title2"));
    $clone.find("p").html($newItem.attr("data-desc"));
    $clone.css({ display: "none" });

    $("div.item.current").after($clone);

    $("div.item.current").fadeOut(300, function () {
        $(this).remove();
    });

    $clone.fadeIn(300, function () {
        $(this).removeClass("new").addClass("current");
    });
}

如何添加此选项?谢谢。

1 个答案:

答案 0 :(得分:0)

$(document).ready(function () {

        $(window).resize();

        $("#nav #prevslide").click(function () {
            ChangeBackground($("#backgrounds img.current"), -1);

        });

        $("#nav #nextslide").click(function () {

            ChangeBackground($("#backgrounds img.current"), 1);

        });

        setInterval(function(){ $("#nav #nextslide").click()},10000);
    });

你也可以使用以下

setInterval(function(){ChangeBackground($("#backgrounds img.current"), -1)},10000);