2012-03-02 8 views
0

JavaScriptのバナーに問題があります。私は最初のスライドをページの読み込みに表示させたいだけです。現在、バナーは最後のスライドにジャンプして最初のスライドにジャンプします。ここに私の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); 


}); 


} 

答えて

0

たぶん、あなたは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; 
+0

私は試しましたが、動作させることができません。私はこれにこだわっています。私はこれを投稿して以来、私はアニメーションのビルドアップの問題を止めるためにいくつかのコードを追加しました。だからどこにコード –

+0

を置くように言ったのですか?だからこのスニペットocデは今のようになります: –

+0

私に戻ってくれてありがとうございました。だから私はあなたが提案したコードを入れました、そして、私はまだそれを動作させることができません。構文エラーが発生します。私は何か間違っているのですか? $ {"left":jqb_tmp + "px"}、500); $( "#jqb_object")。 { \t \t jqb_tmp =((i-1)* jqb_imgW) - ((jqb_vCurrent -1)* jqb_imgW); \t \t $(this).stop()。animate({"left":jqb_tmp + "px"}、500); \t}); –

関連する問題