设置间隔以进行自动滑动功能(Magento站点)

时间:2016-03-23 18:14:28

标签: javascript jquery magento slider

以下代码由freelancer程序员为我们的Magento网站的silde横幅编写。这仅适用于客户点击寻呼机导航菜单时的幻灯片横幅;它滑到下一个横幅。我想为此设置Interval,以便它可以通过点击寻呼机按钮自动滑动。谢谢!!!

function initialize_banner_slider(banner_id) {
    if ($(banner_id).size() <= 0) return;

    var make_center = function(center) {
    center.removeClass("on_right").removeClass("on_left").addClass("on_center");
    $("body").removeClass("theme-light").removeClass("theme-dark").addClass("theme-"+center.data("theme"));
    center.find(".fadeup").each(function() {
        $(this).hide().css("top", (parseInt($(this).data("pos-y"))/750*100+100) + "%");
    });
    $(banner_id + " ul.banner_pager li").removeClass("active");
    $($(banner_id + " ul.banner_pager li")[center.index()]).addClass("active");
    setTimeout(function() {
        center.find(".fadeup").each(function() {
            $(this).show().animate({"top": "-=100%"});
            /* $(this).css("top", parseInt($(this).data("pos-y"))); */
        });
    }, 600);
}

var move_full_card_left = function(banner_id) {
    if ($(banner_id).find(".on_right").size() > 0) {
        $(banner_id).find(".on_center").removeClass("on_center").addClass("on_left");
        make_center( $(banner_id).find(".on_right").first() );

        if ($(banner_id).find(".on_right").size() == 0) {
            // hide arrow
            $(banner_id).find(".move_right").hide();
        } else {
            // show arrow
            $(banner_id).find(".move_right").show();
        }
        $(banner_id).find(".move_left").show();
    }
    return false;
}
var move_full_card_right = function(banner_id) {
    if ($(banner_id).find(".on_left").size() > 0) {
        $(banner_id).find(".on_center").removeClass("on_center").addClass("on_right");
        make_center( $(banner_id).find(".on_left").last() );
        if ($(banner_id).find(".on_left").size() == 0) {
            // hide arrow
            $(banner_id).find(".move_left").hide();
        } else {
            // show arrow
            $(banner_id).find(".move_left").show();
        }
        $(banner_id).find(".move_right").show();
    }
    return false;
}

$(banner_id).find(".move_left").click(function() {
    return move_full_card_right(banner_id);
});
$(banner_id).find(".move_right").click(function() {
    return move_full_card_left(banner_id);
});

for (var i=0, l=$(banner_id+" > ul.slider > li").size(); i<l; i++) {
    var pager = $("<li></li>");
    pager.on("click", function() {
        var index = $(this).index();
        $(banner_id+" > ul.slider > li").each(function(ndx, val) {
            if (ndx < index) {
                $(this).removeClass("on_center").removeClass("on_right").addClass("on_left");
            } else if (ndx > index) {
                $(this).removeClass("on_center").removeClass("on_left").addClass("on_right");
            } else if (ndx == index) {
                make_center($(this));
            }
        });
    });
    pager.appendTo($(banner_id + " ul.banner_pager"));
}

var first = true;
$(banner_id+" > ul.slider > li").each(function(elem) {
    if (first) {
        make_center( $(this) );
        first = false;
    } else {
        $(this).addClass("on_right");
    }
    $(this).on("swipeleft", function() {
        return move_full_card_left(banner_id);
    }).on("swiperight", function() {
        return move_full_card_right(banner_id);
    });
    $(this).css("background-image", "url("+$(this).data("background-image")+")");
});

if ($(banner_id+" > ul.slider > li").size() < 2) {
    $(banner_id).find(".move_right").hide();
}
$(banner_id).find(".move_left").hide();

}

function initialize_parallax() {
  $(".responsive_wrapper").each(function() {
    var base_width = $(this).data("width");
    var base_height = $(this).data("height");
    $(this).css({
        "max-width": base_width+"px",
        "max-height": base_height+"px"
    });
    $(this).find(".responsive").each(function() {
        $(this).css({
            "width": $(this).data("width")/base_width*100 + "%", 
            "height": $(this).data("height")/base_height*100 + "%", 
            "left": $(this).data("pos-x")/base_width*100 + "%", 
            "top": (parseInt($(this).data("pos-y"))/base_height*100) + "%",
        });
    });
});
}

$(document).ready(function() {
  /* parallax positioning */
  // $(".verus-cms .parallax").insertAfter( $(".page-header") );
  $("#product-list-toolbar2").prependTo(".col-main");

  initialize_parallax();
  initialize_banner_slider("#top_banner");
  initialize_banner_slider("#lific_banner");

1 个答案:

答案 0 :(得分:0)

您可以添加以下内容:

setInterval(function(){move_full_card_right(banner_id);},5000);

只要你能获得banner_id,你就应该可以把它扔进你的文件中。我不知道你是如何设置横幅ID的,所以我无法帮助你。