Jquery вращающееся изображение баннера первая проблема с изображением

Я создал модуль баннера с вращающимся изображением для собственной 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

?>

javascript image jquery banner
person user794846    schedule 29.09.2011    source источник

Ответы (1)


arrow_upward
0
arrow_downward

changeSlide() настраивает постепенное появление и затем исчезновение каждого слайда через 2,5 секунды. loop() вызывает changeSlide() каждые 5 секунд и передает идентификатор следующего слайда для показа. Проблема в том, что первый слайд не настраивается таким же образом при перезагрузке страницы. Вероятно, это просто статически прописано на странице с классом _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);
}
person malificent    schedule 29.09.2011
comment
Мне пришлось добавить 1,3-секундную задержку к исчезновению следующего слайда, поскольку они боролись за одно и то же место. Но кроме этого это сработало! - person user794846; 03.10.2011
comment
У меня сейчас новая проблема. Если я нажму на ссылку с изображением привязки, которая остановит цикл и покажет выбранный слайд, он сработает, но если я нажму на эти ссылки в быстрой последовательности одну за другой, более одного слайда попытается отобразить на странице одновременно. Iv попытался установить флаг isRunning, но это не сработало. - person user794846; 05.10.2011