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 클래스가있는 페이지에 정적으로 작성되었을 것입니다.

changeSlide 기능으로 이전 슬라이드와 다음 슬라이드를 모두 전달한 다음 이전 슬라이드를 페이드 아웃하고 다음 슬라이드에서 사라지려면 각 슬라이드를 2.5 초 후에 페이드 아웃하도록 지연을 설정하는 대신 더 좋을 것입니다.

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); 
}