이미지 슬라이드 쇼 전환 html5

여기 html5 이미지 슬라이드 쇼에 대한 작업이 있습니다. 그것은 내 localhost에서 잘 작동합니다. 그러나 왜 슬라이드 쇼 내에 전환이 없는지 궁금합니다. 첫 번째 그림이 사라지고 두 번째 그림이 사라지는 것과 같은 전환.이미지 슬라이드 쇼 전환 html5

HTML 코드

<!DOCTYPE html> 

<html lang="en"> 
<head> 
<script type="text/javascript"> 
<!--> 
var image1 = new Image() 
image1.src = "image/s1.jpg" 
var image2 = new Image() 
image2.src = "image/s2.jpg" 
var image3 = new Image() 
image3.src = "image/s3.jpg" 
var image4 = new Image() 
image4.src = "image/s4.jpg" 
var image5 = new Image() 
image5.src = "image/s5.jpg" 
//--> 
</script> 


<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>iPolice</title> 
<link rel="stylesheet" href="css/style.css" type="text/css" /> 

<!--[if lt IE 8]> 
    <script src ="http://ie7-js.googlecode.com/svn/version/2.1  (beta2)/IE8.js"></script> 
<![endif]-->  
</head> 

<body> 
<ul id="Slideshow"> 
<img src="image/s1.jpg" name="slide" width="1148px" height="250px"> 
<script type="text/javascript"> 
<!-- 
    var step = 1 
    function slideit() { 
     document.images.slide.src = eval("image" + step + ".src") 
     if (step < 3) 
      step++ 
     else 
      step = 1 
     setTimeout("slideit()", 2500) 
    } 
    slideit() 
    //--> 
</script> 
</ul>

CSS 파일은

#Slideshow 
{ 
width: 1000px; 
left:-4.4%; 
position: absolute; 
margin-top: 4%; 
}

출처

2013-05-14 Teo Chuen Wei Bryan

봐 - 당신은'image4'와'image5'를 사용하여 image3' 3 번 '사용하고 있지 않습니다. – Ian

이 문제를 지적 해 주셔서 고맙습니다. 잘 알지 못했습니다. 그러나 이것은 중요한 질문이 아닙니다. 그러나 아직도, 나는 그 관찰에 대해 당신에게 감사해야만한다. –

나는 당신이 거기서 갖고 싶어하는 것이 무엇인지 모릅니다. 당신의 코드에서 정확히 당신은 완화/페이딩을 기대하고 있습니까? jQuery http://api.jquery.com/fadeIn/, 순수 자바 스크립트 http://tech.pro/tutorial/725/javascript-tutorial-simple-fade-animation 또는 멋진 css3 불투명도 전환 또는 키 프레임 애니메이션 http를 사용할 수 있습니다. : //tympanus.net/codrops/2012/01/02/fullscreen-background-image-slideshow-with-css3/ 여기 뭔가가 유용합니다. –

CSS3 전환 그런 일을해서는 안된다.

코드에서 이미지의 src를 약 2500ms마다 변경하기 만하면 css3 전환이 실행되지 않습니다.

당신은 당신의 HTML에 3 개의 이미지를 가질 수 있으며 그 중 하나만 보여주고 다른 하나는 숨기고, 그 다음에는 페이드 또는 다른 애니메이션을 적용 할 수 있습니다.

희망 하시겠습니까? 당신은`src` 속성을 설정하는 방법에 대해

http://www.the-art-of-web.com/css/css-animation/

출처

2013-05-14 03:09:18 simplemx

이미지 슬라이드 쇼 전환 html5

답변

관련 문제