jquery旋轉圖像橫幅第一圖像問題

Question

我已經爲內部CMS創建了一個旋轉圖像橫幅模塊。我沒有寫出所有的jquery，這就是爲什麼我有點困惑。

基本上問題是在頁面重新加載不會像其他圖像一樣淡出之後在橫幅中顯示的第一個圖像。我知道這可能是因爲它是加載的默認圖像，並不是導致圖像橫幅旋轉的循環的一部分。橫幅可以在這裏看到：http://www.easyspacedesign.com/craig/dentalwise/

請注意，重新加載排序後的第一張圖像是如何跳到下一張圖像的，然後他所有的圖像都會平滑淡入淡出。

如何在重新加載之後抓取第一張圖像並使其像其餘的一樣消失？

這裏是代碼：

<script type="text/javascript"> 
<!-- 

var doLooop = true; 

$(document).ready(function(){ 
setInterval("loop()",5000); 
}); 

function loop(){ 
if(!doLooop){ return; } 
var $total = parseInt($("input[name=total_slides]").val()); 
var $id = parseInt($("a._active").attr("rel")); 
var $new = $id+1; 
if($new>$total){$new=1;} 
changeSlide($new); 
} 

function changeSlide($id){ 
// Prepare selectors 
var $total = $("input[name=total_slides]").val(); 
var $txtSlt = "#_slideText_"+$id; 
var $imgSlt = "#_slideImg_"+$id; 
var $active = $("a._active").attr("id"); 
var $new_img_href = "#animation_selectors a:nth-child("+$id+") img"; 
var $new_active = "#animation_selectors a:nth-child("+$id+")"; 
// Hide active images and text  
$(".slideImg").css("display","none"); 
$(".slideTxt").css("display","none"); 
// Display selected images and text 
$($txtSlt).fadeIn(1200); 
$($imgSlt).fadeIn(1200); 
$($txtSlt).delay(2500).fadeOut(1200); 
$($imgSlt).delay(2500).fadeOut(1200); 
// Update active anchor image 
$("a._active img").attr("src","<?php echo ROOT; ?>Images/StyleImages/off.png"); 
$("a._active").removeClass("_active"); 
$($new_img_href).attr("src","<?php echo ROOT; ?>Images/StyleImages/on.png"); 
$($new_active).addClass("_active"); 
} 

$(function(){ 
$("#animation_selectors a").click(function(e){ 
      e.preventDefault();         
    var $id = $(this).attr("rel"); 
    doLooop = false; 
    changeSlide($id); 
}); 
}); 

--> 
</script> 
<div id="animation"> 

<div id="animation_slides"> 
    <?php 
    $img_sql = "SELECT strImageUrl FROM tbl_mod_Animation ORDER BY intAnimationID"; 
    if($img = $db->get_results($img_sql)){ $i=1; 
     foreach($img as $img){ 
      if($i!=1){ $display = " style=\"display:none;\""; } else { $display = ""; } 
      echo "<div id=\"_slideImg_$i\" class=\"slideImg\" $display><img src=\"".ROOT."Images/Uploads/Slides/".$img->strImageUrl."\" alt=\"\" /></div>"; 
      $i++; 
     } 
    } 
    ?> 
</div> 
<div id="animation_text"> 
    <?php 
    $text_sql = "SELECT strText FROM tbl_mod_Animation ORDER BY intAnimationID"; 
    if($text = $db->get_results($text_sql)){ $i=1; 
     foreach($text as $text){ 
     if($i!=1){ $display = " style=\"display:none;\""; } else { $display = ""; } 
     echo "<div id=\"_slideText_$i\" class=\"slideTxt\" $display>".$text->strText."</div>"; 
     $i++; 
     } 
    } 

    ?> 
</div> 

<div id="animation_selectors"> 
    <?php 
    for($x=1;$x<$i;$x++){ 
     if($x==1){ 
      ?><a id="slide_opt<?php echo $x; ?>" href="#" rel="<?php echo $x; ?>" class="_active"><img class="slideOpt" src="<?php echo ROOT; ?>Images/StyleImages/on.png" alt="" /></a><?php 
      } else { 
      ?><a id="slide_opt<?php echo $x; ?>" href="#" rel="<?php echo $x; ?>"><img class="slideOpt" src="<?php echo ROOT; ?>Images/StyleImages/off.png" alt="" /></a><?php 
      } 
     } 
    echo "<input type=\"hidden\" name=\"total_slides\" value=\"".($i-1)."\" />"; 

    ?> 
</div> 

</div><!--end of animation--> 
<?php 

?> 

Answer 1

changeSlide（）設置各滑動淡入，然後在2.5秒淡出。 loop（）每5秒調用一次changeSlide（）並傳遞下一張幻燈片的id以顯示。問題是第一張幻燈片在重新加載頁面時沒有以同樣的方式設置。它可能只是用_active類靜態寫在頁面上。

你最好不要在2.5秒後設置淡出每張幻燈片的延遲，以便將上一張和下一張幻燈片傳遞到changeSlide函數，然後淡入淡出和淡入淡出。

function loop() { 
    ... 
    changeSlide($id, $new); 
} 

，然後在changeSlide：

function changeSlide($prev, $next) { 
    ... 
    var $prevTxtSlt = "#_slideText_" + $prev; 
    var $prevImgSlt = "#_slideImg_" + $prev; 
    var $nextTxtSlt = "#_slideText_" + $prev; 
    var $nextImgSlt = "#_slideImg_" + $prev; 
    ... 
    $($prevTxtSlt).fadeOut(1200); 
    $($prevImgSlt).fadeOut(1200); 
    $($nextTxtSlt).fadeIn(1200); 
    $($nextImgSlt).fadeIn(1200); 
}