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

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

修改

而不是

//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;

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

1 个答案: