여러 이미지로 div에 이미지 슬라이드 쇼를 만드는 방법

내 페이지에 이미지 슬라이드 쇼를 만들고 싶지만 아래 코드를 사용했지만 작동하지 않습니다.여러 이미지로 div에 이미지 슬라이드 쇼를 만드는 방법

HTML 코드 :

<div id="slider"></div>

JS 코드 : 또한

var image_slide = new Array("01.jpg", "02.jpg","03.jpg","04.jpg","05.jpg"); 
var image_length = image_slide.length; 
var image_current = 0; 

function slide() { 
    window.onload = function() { 
     document.getElementById("slider").appendChild(image_current); 
    }; 

    if (image_current >= image_length){ 
     image_current = 0; 
    } else { 
     document.slideshow.src = image_slide[image_current]; 
     image_current++; 
    } 
} 

function auto() { 
    setinterval(slide, 3000); 
}

, 그것은 var image_slide = new Array("image/01.jpg","image/02.jpg"); 같은 배열에 파일의 경로를 사용하는 것이 맞습니까?

출처

2014-04-19 user3422277

'auto()'외에 다른 곳에서'slide() '를 호출하고 있습니까? ? –

이미지가 아닌 '# slider'에 숫자를 추가하고 있습니다. – Lugia101101

코드를 약간 변경했습니다. 이전에 내가 창로드의 테스트 케이스를 모르는 이미지 태그 및 기능

<!DOCTYPE html> 
<html> 
    <head> 
    var image_slide = new Array("01.jpg", "02.jpg","03.jpg","04.jpg","05.jpg"); 
    var image_length = image_slide.length; 
    var image_current = -1; 

    function slide() { 
    if (image_current == image_length){ 
    image_current = 0; 
    } else { 
    image_current++; 
    } 
    document.slideshow.src = image_slide[image_current]; 
    } 

    function auto() { 
    setInterval(slide, 1000); 
    } 


    window.onload = function(){ 
    slide(); // To show the 1st image 
    auto(); // Initialize the slider 
    } 

    </script> 
</head> 
<body> 
    <div id="slider"> 
    <img name="slideshow" /> 
    </div> 
</body> 
</html>

의도 초기화를하지 않아도하지만 몸 후 자바 스크립트를 넣어 더 나은 또는 .. 완벽하게 작동한다 jquery의 onload를 사용하여 크로스 브라우저 문제를 없애고 모든 것을 객체 나 함수로 랩핑하여 깨끗하게 유지하고 다른 사람들과 안전하게 놀 수 있습니다.

출처

2014-04-19 04:19:04

여러 이미지로 div에 이미지 슬라이드 쇼를 만드는 방법

답변

관련 문제