Javascript 横幅滑块在页面加载时相互重叠

Question

我的 JavaScript 横幅有问题。我只想让第一张幻灯片出现在页面加载中。目前，横幅会在瞬间跳到最后一张幻灯片，然后跳回第一张幻灯片。这是我的 JavaScript。我是新手，我一直在互联网上搜索，但没有运气，希望能得到帮助。谢谢。

var jqb_vCurrent = 0;
var jqb_vTotal = 0;
var jqb_vDuration = 6000;
var jqb_intInterval = 0;
var jqb_vGo = 1;
var jqb_vIsPause = false;
var jqb_tmp = 20;
var jqb_title;
var jqb_imgW = 680;
var jqb_imgH = 200;

jQuery(document).ready(function() { 
jqb_vTotal = $(".jqb_slides").children().size() -1;
$(".jqb_info").text($(".jqb_slide").attr("title")); 
jqb_intInterval = setInterval(jqb_fnLoop, jqb_vDuration);

//Horizontal
$("#jqb_object").find(".jqb_slide").each(function(i) { 
    jqb_tmp = ((i - 1)*jqb_imgW) - ((jqb_vCurrent -1)*jqb_imgW);
    $(this).animate({"left": jqb_tmp+"px"}, 500);
});


$("#btn_pauseplay").click(function() {
    if(jqb_vIsPause){
        jqb_fnChange();
        jqb_vIsPause = false;
        $("#btn_pauseplay").removeClass("jqb_btn_play");
        $("#btn_pauseplay").addClass("jqb_btn_pause");
    } else {
        clearInterval(jqb_intInterval);
        jqb_vIsPause = true;
        $("#btn_pauseplay").removeClass("jqb_btn_pause");
        $("#btn_pauseplay").addClass("jqb_btn_play");
    }
});
$("#btn_prev").click(function() {
    jqb_vGo = -1;
    jqb_fnChange();
});

$("#btn_next").click(function() {
    jqb_vGo = 1;
    jqb_fnChange();
});
});

function jqb_fnChange(){
clearInterval(jqb_intInterval);
jqb_intInterval = setInterval(jqb_fnLoop, jqb_vDuration);
jqb_fnLoop();
}

function jqb_fnLoop(){
if(jqb_vGo == 1){
    jqb_vCurrent == jqb_vTotal ? jqb_vCurrent = 0 : jqb_vCurrent++;
} else {
    jqb_vCurrent == 0 ? jqb_vCurrent = jqb_vTotal : jqb_vCurrent--;
}


$("#jqb_object").find(".jqb_slide").each(function(i) { 
    if(i == jqb_vCurrent){
        jqb_title = $(this).attr("title");
        $(".jqb_info").animate({ opacity: 'hide', "left": "-50px"}, 250,function(){
            $(".jqb_info").text(jqb_title).animate({ opacity: 'show', "left": "0px"}, 500);
        });
    } 


    //Horizontal Scrolling
    jqb_tmp = ((i - 1)*jqb_imgW) - ((jqb_vCurrent -1)*jqb_imgW);
    $(this).animate({"left": jqb_tmp+"px"}, 500);


});


}

Answer 1

也许您不应该为document.ready 上的每个#jqb_object.jqb_slide 元素设置动画？

编辑

代替

//Horizontal
$("#jqb_object").find(".jqb_slide").each(function(i) { 
    jqb_tmp = ((i - 1)*jqb_imgW) - ((jqb_vCurrent -1)*jqb_imgW);
    $(this).animate({"left": jqb_tmp+"px"}, 500);
});

试试

//Horizontal
i = 1;
jqb_tmp = ((i - 1)*jqb_imgW) - ((jqb_vCurrent -1)*jqb_imgW);
$("#jqb_object").find(".jqb_slide:first").animate({"left": jqb_tmp+"px"}, 500);

如果您希望最后一张幻灯片在页面加载时出现并带有自己的标题，请更改 jqb_vCurrent 索引：

jqb_vCurrent = jqb_vTotal;