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;