Fadein Fadeout Javascript слайд-шоу

Question

Fadein Fadeout Javascript слайд-шоу

0

Im пытается создать простую затухание в слайде слайдов изображения в javascript. Ive удалось создать тот, который показывает одно изображение, исчезает, а затем исчезает другое изображение, но это не то, что им нужно. То, что я хочу, так это то, что когда первое изображение исчезает, на нем уже есть другое изображение, и когда другое изображение также исчезает, это еще одно изображение за этим. Я пытаюсь избежать того, чтобы часть веб-страницы, в которой слайд-шоу не пуста, в любое время во время слайд-шоу. Может ли кто-нибудь помочь мне, отредактировав мой код или показывая мне, как я могу это достичь?

var count = 1;
setInterval(function(){
if (count <= 3){
    $("#slideshow").fadeOut(2000);
    setTimeout(function(){$("#slideshow").attr("src","breakup/"+ count +".jpg")},2000);
    $("#slideshow").fadeIn(2000);
    count++;

    if (count>3){
    count = 1
    }
}//end if
}/*end function*/,5000);

digiwebguy 01 дек. 2013, в 12:00

Источник

0

Вы не можете использовать 1 элемент img для этого, вам нужно 2 ...
udidu 01 дек. 2013, в 10:50

Теги:

javascript

jquery

3 ответа

0

Я создал эту скрипку http://jsfiddle.net/xmLk4/ Вы должны установить изображения для слайдов 1 и 2 после затухания, чтобы разрешить загрузку изображения до того, как он затухает.

function fade(){

    $("#slide2").fadeOut(2000, function() {

        // set new image slide 2

    }).delay(2000).fadeIn(2000, function() {

        // set new image slide 1

    }).delay(2000);

}

setInterval(fade, 8000);

fade();

Bas van Dijk 01 дек. 2013, в 08:58

0

Попробуйте это http://jsfiddle.net/wfvD6/.

По сути, он клонирует старое изображение и помещает его поверх нового изображения, а затем исчезает и стареет и становится новым в одно и то же время.

    //clone the old image
    var ghost = slider.clone();

    //remove id
    ghost.removeAttr('id');

    //make the ghost image just over the old image
    var pos = slider.position();
    ghost.css({
        position: 'absolute',
        top: pos.top,
        left: pos.left
    });
    ghost.insertBefore(slider);

    //$("#slideshow").attr("src","breakup/"+ count+".jpg");

    //change image
    setImage(count);

    //fadeout ghost
    ghost.fadeOut(2000, function () {
        ghost.remove();
        ghost = null;
    });

    //fadein slider
    slider.fadeIn(2000);

Andrew 01 дек. 2013, в 08:30

Ещё вопросы

Вы не можете использовать 1 элемент img для этого, вам нужно 2 ...

roo2 · Accepted Answer · 2013-12-01T10-00-00.000Z

Это, вероятно, проще всего загрузить все ваши изображения

CSS:

<style>
    .slider{
       position: relative;
    }

    img {
       position: absolute;
       top:0;
       left:0;
    }
</style>

Javascript:

<script>
var count = 1
setInterval(function(){
  var old= $('#img-' + count);
  old.fadeOut(2000);

  count++;
  if (count>3){
    count = 1
  }

  var next= $('#img-' + count);
  next.fadeIn(2000);
}, 5000);


</script>

HTML:

<div class="slider">
   <img id="img-1" src="breakup/1.jpg">
   <img id="img-2" src="breakup/2.jpg">
   <img id="img-3" src="breakup/3.jpg">
</div>

Спасибо чувак! Это то, что я искал