Фоновый графический ротатор с jQuery?

Я работаю над веб-сайтом, что фоновое изображение будет исчезать из одного в другое, у меня есть настройка и работа около 98%. Есть только одна небольшая проблема. Когда он сначала загружается, и он сначала угасает, он исчезает до белого, а затем к изображению, а не исчезает прямо в следующее изображение. После этого он работает красиво. Это использование jQuery 1.9, и у меня есть jQuery noConflict, поскольку предыдущий разработчик закодировал меню сайтов с помощью MooTools.Фоновый графический ротатор с jQuery?

<html> 
<head> 
    <script src="js/jquery.js"> 
    </script> 
    <script> 
var $s = jQuery.noConflict(); 

function swapImages(){ 
    var $sactive = $s('#myGallery .active'); 
    var $snext = ($s('#myGallery .active').next().length > 0) ? $s('#myGallery .active').next() : $s('#myGallery img:first'); 

    $snext.fadeIn(1500).addClass('active'); 
    $sactive.fadeOut(2000, function(){ 
    }); 
    $sactive.removeClass('active'); 
}; 

$s(document).ready(function(){ 
    // Run our swapImages() function every 5secs 
    setInterval('swapImages()', 5000); 

}); 
</script> 
</head> 
<style> 

#myGallery{ 
    position:relative; 
    width:100%; /* Set your image width */ 
    height:auto; /* Set your image height */ 
} 

#myGallery img{ 
    display:none; 
    position:absolute; 
    top:0; 
    width: 100%; 
    left:0; 
} 

#myGallery img.active{ 
    display:block; 
} 

.home-page-rotator{ 
    position:absolute; 
    width:100%; 
    z-index:-10; 
} 
</style> 
<body> 
<div class="home-page-rotator" id="myGallery"> 
<img src="images/1.jpg" class="active" /> 
<img src="images/2.jpg" /> 
<img src="images/3.jpg" /> 
</div> 
</body> 
</html>

Я вынул все содержимое, так что вы можете проверить, если вы хотите, но это все, что работает фоновое вращение и увядает. Также у меня есть CSS в отдельном файле, но для публикации здесь я просто поместил его в строку, чтобы вы могли видеть CSS за кодом. Позвольте мне знать, что я должен сделать, чтобы исправить это?

источник

2013-03-12 Nick Darley

Вы хотите повернуть через фоновые изображения (как в css) или через элементы img (как в элементах DOM)? –

Перемещение метода класса удалить для вызова функции из Затухание, кажется, работает лучше для меня (по крайней мере, в Chrome):

<script> 
    var $s = jQuery.noConflict(); 

    function swapImages(){ 
     var $sactive = $s('#myGallery .active'); 
     var $snext = ($s('#myGallery .active').next().length > 0) ? $s('#myGallery .active').next() : $s('#myGallery img:first'); 

     $sactive.fadeOut(2000, function(){ 
      $sactive.removeClass('active'); 
     }); 
     $snext.fadeIn(1500).addClass('active'); 
    }; 

    $s(document).ready(function(){ 
     // Run our swapImages() function every 5secs 
     setInterval('swapImages()', 5000); 

    }); 
</script>

источник

2013-03-12 18:25:44 peater

Это работало для меня в Safari, FireFox и Chrome, кто-нибудь может подтвердить IE? –

Да. Он хорошо выглядит в IE9. У меня нет IE8 для тестирования, но он выглядит нормально в IE8-режиме IE9. – peater

Я столкнулся с этой проблемой некоторое время назад, и я нашел простое решение заключалось в том, чтобы переключиться с img-элементов на использование двух div и фонового изображения css url для отображения ваших изображений. Я сделал простой слайдер для этого некоторое время назад. Вы можете скопировать все, что вам нужно.

Background slider source

В сущности, если у вас есть две дивы, которые позиционированы абсолютно как элементы фона, вы можете цикл их Z-индексов и исчезающие их в и. Кроме того, вы можете загрузить следующее изображение в созданном элементе img и после его загрузки изменить фоновое изображение скрытого div и потушить его. Это означает, что загрузка отсутствует, и вы можете сразу перейти в слайд-шоу.

Ниже приведен некоторый псевдо-код, но, вероятно, было бы проще просто взглянуть на реальные функции в источнике.

base.next_slide = function() { 
    "current slide" = "next slide"; 
    base.containers[the_shown_container].fadeOut(duration,function() { 
     $(this).css({'background-image':'url("' + "Next image url" + '")', 
        "z-index":"-2"}); 
     base.containers[the_next_container].css("z-index","-1"); 
     $(this).show(); 
     the_shown_container = the_next_container; 
    }); 
    }; 

Plugin.prototype.init = function (base) { 
    $('<img/>').attr('src', "Next image url").load(function() { 
    base.containers[the_next_container].css('background-image', 'url(' + "Next image url" + ')'); 
    if ("there's only one image in the slider"){ 
     base.containers[the_shown_container].fadeOut(duration,function() { 
     $(this).css("z-index","-2"); 
     base.containers[the_next_container].css("z-index","-1"); 
     }); 
     return; 
    } 
    base.next_slide(); 
    setInterval(base.next_slide ,base.o.interval); 
    }); 
};

источник

2013-03-12 18:36:59

Фоновый графический ротатор с jQuery?

ответ

Смежные вопросы