#javascript #jquery #image #banner
#javascript #jquery #изображение #баннер
Вопрос:
Я создал модуль вращающегося баннера с изображением для собственной CMS. Я не писал весь jquery для этого, и поэтому я немного смущен.
В основном проблема заключается в том, что первое изображение, отображаемое на баннере после перезагрузки страницы, не исчезает, как это делают остальные изображения. Я понимаю, что это, вероятно, потому, что это загруженное изображение по умолчанию и не является частью цикла, который вызывает поворот баннера изображения. Баннер можно увидеть здесь: http://www.easyspacedesign.com/craig/dentalwise /
Обратите внимание, как первое изображение после сортировки перезагрузки просто переходит к следующему изображению, но затем все его изображения после этого плавно исчезают и исчезают.
Как мне захватить это первое изображение после перезагрузки и сделать его затухающим, как rest?
вот код:
<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
?>
Ответ №1:
changeSlide() настраивает каждый слайд так, чтобы он исчезал, а затем исчезал через 2,5 секунды. цикл () вызывает changeSlide() каждые 5 секунд и передает идентификатор следующего слайда для показа. Проблема в том, что первый слайд не настроен таким же образом при перезагрузке страницы. Вероятно, это просто статически записано на странице с классом _active.
Вам было бы лучше, вместо того, чтобы устанавливать задержку для затухания каждого слайда через 2,5 секунды, передать как предыдущий, так и следующий слайд в функцию changeSlide, а затем затухать предыдущий и затухать в следующем.
function loop() {
...
changeSlide($id, $new);
}
а затем в слайде изменений:
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);
}
Комментарии:
1. Мне пришлось добавить задержку в 1,3 секунды к затуханию следующего слайда, поскольку они конкурировали за одно и то же пространство. Но в остальном это сработало!
2. Теперь у меня новая проблема. Если я нажимаю ссылку на изображение привязки, которая останавливает цикл и показывает выбранный слайд, это работает, но если я нажимаю на эти ссылки в быстрой последовательности один за другим, одновременно на странице появляется более одного слайда. Я попытался установить флаг isRunning, но это не сработало.