Görüntü değişimi her 30 saniye - 30 saniye sonra bir görüntü değişikliği yapmak istiyorum döngü

Question

...

kod böyle görünüyor kullanıyorum:

Senaryo:

var images = new Array() 
images[0] = "image1.jpg"; 
images[1] = "image2.jpg"; 
images[2] = "image3.jpg"; 
setTimeout("changeImage()", 30000); 
var x=0; 

function changeImage() 
{ 
document.getElementById("img").src=images[x] 
x++; 
} 

Ve vücut: bunu henüz test etmedim Şimdi

<img id="img" src="startpicture.jpg"> 

ama hesaplarım doğruysa eğer çalışacaktır :)

Şimdi istediğim, "solma geçişi" yapmak ve görüntülerin değişmesini döngü yapmak istiyorum (tüm resimler gösterildikten sonra yeniden başlatılıyor). Sizden herhangi birini nasıl yapacağınızı biliyor musunuz? Ben geçmişte bu jQuery eklentisi kullandım

Answer 1

Bunun gibi şeyler için çerçeveler kullanmayı kabul ediyorum, sadece daha kolay olduğu için. Bunu gerçekten hızlı bir şekilde hackledim, sadece bir görüntüyü susturacağım ve daha sonra anahtarlar da IE'nin eski sürümlerinde çalışmayacak. Ancak gerçek solgunluğun kodunu görebileceğiniz gibi KARASZI István tarafından yayınlanan JQuery uygulamasından çok daha uzun.

function changeImage() 
{ 
    var img = document.getElementById("img"); 
    img.src = images[x]; 
    x++; 

    if(x >= images.length){ 
     x = 0; 
    } 

    fadeImg(img, 100, true); 
    setTimeout("changeImage()", 30000); 
} 

function fadeImg(el, val, fade){ 
    if(fade === true){ 
     val--; 
    }else{ 
     val ++; 
    } 

    if(val > 0 && val < 100){ 
     el.style.opacity = val/100; 
     setTimeout(function(){fadeImg(el, val, fade);}, 10); 
    } 
} 

var images = [], 
x = 0; 

images[0] = "image1.jpg"; 
images[1] = "image2.jpg"; 
images[2] = "image3.jpg"; 
setTimeout("changeImage()", 30000); 

Answer 2

:) yok:

CrossSlide

Büyük çalıştı ve tam olarak ne istediğinizi yapar.

Answer 3

innerfade'a bir göz atın. Here's an example nerede olduğunuzu tam olarak yapmak için kullandım, sanırım.

Çeşitli javascript kütüphanelerde bir göz atmalısınız

Answer 4

, onlar size yardım etmek gerekir:

• mootools
• jQuery
• Dojo Toolkit
• prototype

tümü Onların öğreticiler var ve kaybolur/fade out ab asic kullanımı.

Örneğin; jQuery:

var $img = $("img"), i = 0, speed = 200; 
window.setInterval(function() { 
    $img.fadeOut(speed, function() { 
    $img.attr("src", images[(++i % images.length)]); 
    $img.fadeIn(speed); 
    }); 
}, 30000); 

Answer 5

setInterval işlevi, kullanılması gereken özelliktir. İşte herhangi bir fantezi solma seçeneği olmadan aynı bir örnek. Bir görüntüyü her 30 saniyede bir değiştiren basit Javascript. Resimlerin ayrı bir görüntü klasöründe tutulduğunu ve dolayısıyla her görüntünün başında _images/var olduğunu varsaydım. Ayarlanması gereken şekilde kendi yolunuza sahip olabilirsiniz.

KODU:

var im = document.getElementById("img"); 

var images = ["_images/image1.jpg","_images/image2.jpg","_images/image3.jpg"]; 
var index=0; 

function changeImage() 
{ 
    im.setAttribute("src", images[index]); 
    index++; 
    if(index >= images.length) 
    { 
    index=0; 
    } 
} 

setInterval(changeImage, 30000); 

Answer 6

Sadece That.Its Kolay kullanın.

<script language="javascript" type="text/javascript"> 
    var images = new Array() 
    images[0] = "img1.jpg"; 
    images[1] = "img2.jpg"; 
    images[2] = "img3.jpg"; 
    setInterval("changeImage()", 30000); 
    var x=0; 

    function changeImage() 
    { 
       document.getElementById("img").src=images[x] 
       x++; 
       if (images.length == x) 
       { 
        x = 0; 
       } 
    } 
</script> 

Ve Beden bu kod yaz

: -

<img id="img" src="imgstart.jpg">