2014-12-24 3 views
1

어떻게이 코드에 페이드를 추가 할 수 있습니까 ?? 메신저로 비슷한 모양을 만들려고합니다페이드 효과를 추가하는 방법을 알 수 없음

http://jsfiddle.net/xmLk4/ 나는 코드를 시도했지만 올바르게 추가하는 법을 모르겠습니다.

<html> 
<head> 
<script type="text/javascript"> 

var slideimages = new Array() // create new array to preload images 
slideimages[0] = new Image() // create new instance of image object 
slideimages[0].src = "http://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/000080_Navy_Blue_Square.svg/2000px-000080_Navy_Blue_Square.svg.png" 
// set image object src property to an image's src, preloading that image in the process 
slideimages[1] = new Image() 
slideimages[1].src = "http://upload.wikimedia.org/wikipedia/commons/thumb/2/25/Red.svg/120px-Red.svg.png" 
slideimages[2] = new Image() 
slideimages[2].src = "http://static.tumblr.com/674bc8c8a561428e14d7c5abe10d696f/ijaflyo/IdQmnirks/tumblr_static_greenbox.png" 
</script> 
</head> 
<body> 
<img src="firstcar.gif" id="slide" width="948" height="403" /> 

<script type="text/javascript"> 

//variable that will increment through the images 
var step=0 

function slideit(){ 
//if browser does not support the image object, exit. 
if (!document.images) 
return 
document.getElementById('slide').src = slideimages[step].src 
if (step<2) 
step++ 
else 
step=0 
//call function "slideit()" every 2.5 seconds 
setTimeout("slideit()",2500) 



} 

slideit() 

</script> 
</body> 
</html>` 
+1

언뜻 보면, 당신은 몇 가지 세미콜론을 놓치고 시도하여 img style= "transition:all 0.6s;"

에 추가 할 수 있습니다. – Tico

+0

있어 : 고마워 –

답변

1

나는 실제로 무엇을 요구하고 있는지 잘 모르겠습니다.

CSS 전환을 의미합니까? 그렇다면

전환을 추가하는 것을 고려하십시오. 모두 0.6s;

이 지금

function slideit(){ 

    if (!document.images) 
     return 


     document.getElementById('slide').style.opacity = "0"; 
    setTimeout(function(){ 
     document.getElementById('slide').src = slideimages[step].src; 
     document.getElementById('slide').style.opacity = "1"; 
    },500) 

     if (step<2) 
     step++ 
     else 
     step=0 

     setTimeout(slideit,2500) 



} 
+0

내가 무엇을 묻는 것은 내가 이것과 같은 페이드를 갖고 싶어한다 : http : //jsfiddle.net/xmLk4/ –

+0

또한이 코드는 무엇이며 어디에서 추가 할 것인가? transition : all 0.6s ; –

+0

거의 거기에 :) 그러나 퇴색하는 것은 느리지 만 그림은 빠르게 될 예정이다. –

관련 문제