이미지 변화를 30 초마다 - 내가 30 초 후에 이미지 변경하고자하는 루프

Question

...

코드 I는 다음과 같다을 사용하고 있습니다 :

스크립트 :

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++; 
} 

그리고 신체 : 아직이 하나를 테스트하지 않았습니다 이제

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

하지만, 내 계산이 정확 경우 작동합니다 :)

이제 내가 원하는 것은 "페이딩 전환"을 만드는 것입니다. 그리고 나는 이미지를 루프로 바꾸고 싶습니다 (모든 이미지가 표시된 후에 다시 시작합니다). 너희들이 그 일을 어떻게하는지 안다? 나는 과거에이 jQuery 플러그인을 사용했습니다

Answer 1

나는 이런 식으로 프레임 워크를 사용하는 것에 동의합니다. 나는이 사실을 빠르게 해킹하고 그냥 이미지를 사라지게하고 스위치를 돌리면서 이전 버전의 IE에서는 작동하지 않을 것이다. 그러나 실제 페이드에 대한 코드는 KARASZI István이 게시 한 JQuery 구현보다 훨씬 길다.

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

:)하지 않습니다

CrossSlide

그것은 좋은 일하고 정확하게 당신이 원하는 않습니다.

Answer 3

innerfade을 살펴보십시오. Here's an example 나는 네가 한 일을 정확히하기 위해 그것을 사용했다.

당신은 다양한 자바 스크립트 라이브러리를 살펴한다

Answer 4

, 그들은 당신을 도울 수있을 것입니다 :

• mootools
• jQuery
• Dojo Toolkit
• prototype

의 모든 그들에게는 튜토리얼이 있고, 페이드 인/페이드 아웃은 ab입니다. asic 사용법.

예 : 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 함수는 사용해야합니다. 다음은 멋진 페이딩 옵션이없는 예제입니다. 30 초마다 이미지를 변경하는 간단한 자바 스크립트. 필자는 이미지가 별도의 이미지 폴더에 보관되어 있으므로 모든 이미지의 시작 부분에 _images /가 있다고 가정했습니다. 필요에 따라 자신의 경로를 설정할 수 있습니다.

CODE :

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

그냥 That.Its 쉬운을 사용합니다.

<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> 

그리고 몸에서이 코드 작성

는 : -

은

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