JQuery kullanarak solma veya görüntü geçişi efekti nasıl eklenir?

Question

Sayfamda sadece bir tane <img> eleman var. Bu görüntünün her 7 saniyede bir src özniteliğini değiştiriyorum.

Yeni görüntüleri her 7 saniyede görüyorum, ancak yeni görüntü yüklenirken biraz solma veya geçiş etkisi ekleyebilirseniz daha güzel olur.

Bazılarının bunun için basit bir betiği var mı?

Eklentiye ihtiyacım yok. Sadece bunu yapmak için bir ipucu veya birkaç örnek numune gerekir.

Answer 1

Kaiqing söz şeylere rağmen, size değiştirmeden yaparken/çıkış görüntü solmaya jQuery geri aramaları yeteneğini kullanabilirsiniz. Bu yüzden gibi yapılabilir: şöyle #frontImg arkasında olmak #backImg Set

<img id="backImg" /> 
<img id="frontImg" /> 

: http://www.jsfiddle.net/bradchristie/HsKpq/1/

$('img').fadeOut('slow',function(){ 
    $(this).attr('src','/path/to/new_image.png').fadeIn('slow'); 
}); 

Answer 2

Bunu tek bir görüntü ile yapamazsınız.

Kontrol şuna:

<div id="main_over"></div> 
    <div id="main_img"></div> 
    <div id="himg" style="display:none; clear:both; margin-top:40px;"> 

      <img id="si_15" src="http://website.com/media/uploaded/home_slideshow/53/dummy_image_large_1__large.jpg" alt="dummy_image_large_1" /> 

      <img id="si_16" src="http://website.com/media/uploaded/home_slideshow/53/dummy_image_large_2__large.jpg" alt="dummy_image_large_2" /> 

      <img id="si_17" src="http://website.com/media/uploaded/home_slideshow/53/dummy_image_large_3__large.jpg" alt="dummy_image_large_3" /> 

      <img id="si_18" src="http://website.com/media/uploaded/home_slideshow/53/dummy_image_large_4__large.jpg" alt="dummy_image_large_4" /> 

    </div> 
<style> 
#main_over{position:absolute; z-index:10; width:800px; height:600px; background:#fff; display:block;} 
</style> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    var i = 0; 
    $('#himg img').each(function(){ 
     if(i == 0) 
     { 
      $('#main_over').html('<img src="' + $(this).attr('src') + '" alt="" />'); 

     } 
     if(i == 1) 
     { 
      $('#main_img').html('<img src="' + $(this).attr('src') + '" alt="" />'); 
     } 
     i ++; 

     slide.arr.push($(this).attr('src')); 
    }); 

    setTimeout(function(){ 
     if(slide.arr.length < 2) 
      slide.fade(0); 
     else 
      slide.fade(2); 
    }, 3000); 
}); 

var slide = { 
    arr: Array(), 
    fade: function(i) 
    { 
     $('#main_over').fadeOut("medium"); 
     setTimeout(function(){slide.next(i);}, 1000); 
    }, 
    next: function(i) 
    { 
     $('#main_over').html($('#main_img').html()); 
     $('#main_over').css('display', 'block'); 

     $('#main_img').html('<img src="' + slide.arr[i] + '" alt="" />'); 

     i++; 
     if(i >= slide.arr.length) 
      i = 0; 

     setTimeout(function(){slide.fade(i);}, 3000); 
    } 
} 

</script> 

Answer 3

İki fotoğrafı kullanmak isteyeceksiniz

#backImg 
{ 
    position: absolute; 
} 

Sonra içinde her 7 saniyede bir patlak veren kodunuzda, ön görüntü açılır. Bu, arkadaki resim zaten arkasında olduğundan, çapraz geçiş efektinizi otomatik olarak yapar. solma yapıldığında, geri resmin src ön görüntünün kaynağını ayarlamak göstermek ve arka görüntü içine sonraki resmi ön yük:

function transitionImages(preloadImgUrl) 
{ 
    $("#frontImg").fadeOut("slow", function() 
    { 
     $("#frontImg").attr("src", $("#backImg").attr("src")).show(); 
     $("#backImg").attr("src", preloadImgUrl); 
    } 
} 

Bu, tüm görüntülerin aynı büyüklükte olan varsayar. Eğer değilse, sadece css ile biraz daha ayrıntılı olmak ve görüntüleri soluklaşan divlara sarmak isteyeceksiniz. [Söylüyor?]