2013-04-28 1 views
0

이 코드는 모든 페이지를 다시로드 할 때 표시되는 이미지를 임의로 변경하는 데 사용됩니다. JavaScript에 익숙하지 않아 누군가가이 코드를 무작위 대신에 순서대로 이미지를 변경하도록 도와 줄 수 있습니까? 여기 Javascript를 임의로 만들 수있는 방법은 무엇입니까?

은 코드입니다 :

function showImage(){ 
    var theImages = new Array() 

    theImages[0] = '100.jpg' 
    theImages[1] = '200.jpg' 
    theImages[2] = '300.jpg' 
    theImages[3] = '400.jpg' 
    theImages[4] = '500.png' 

    var j = 0 
    var p = theImages.length; 

    var preBuffer = new Array() 
    for (i = 0; i < p; i++){ 
     preBuffer[i] = new Image() 
     preBuffer[i].src = theImages[i] 
    } 

    var whichImage = Math.round(Math.random()*(p-1)); 
    function showImage(){ 
    document.write('<img src="'+theImages[whichImage]+'">'); 
} 

그리고 나는 단순히이와 본문에 이미지를 호출 인 (

showImage(); 
+2

어쩌면 주제 해제하지만 당신은 괄호 안에 배열을 나열해야합니다. var theImages = [ '100.jpg', '200.jpg'] ... 등. 더 쉽고 읽기 쉽습니다. – nick

답변

2

이렇게하면 순서대로 표시되고 처음부터 모두 반복됩니다. 여기

(function(){ 
    var list = [ 
      "100.jpg", 
      "200.jpg", 
      "300.jpg", 
      "400.jpg", 
      "500.jpg" 
     ],i = localStorage.image || 0; 
    document.write('<img src="'+list[i]+'"/>'); 
    i++; 
    i%=list.length; 
    localStorage.image = i; 
})(); 

가 jsfiddle입니다 : http://jsfiddle.net/J9gAD/

아무도 (jsbin는 jsfiddle은 codepen은) 당연히, document.write를을 지원하는 것, 그래서 바이올린 대신의 img 태그의 src 값을 변경하는 방법을 보여줍니다 요소 인투 리즈를 쓴다.

은 (사업부)에서 HTML 내용이 작업을 수행하려면 ... http://jsfiddle.net/J9gAD/2/

+2

두 번째 이미지가 아닌 첫 번째 이미지로 시퀀스를 시작하려면 (a) 다음을 변경해야합니다. 0 '~'|| -1 "또는 (b)'i ++;'와'localStorage.image = i;'를 함수의 맨 아래로 이동하십시오. – peterflynn

+0

안녕하세요 도움을 주셔서 감사합니다. 나는 자바 스크립트에 아주 새로운 것을 언급해야한다고 생각합니다. 그래서 jsbin 예제가 아니라 여기에 저에게 준 예제를 복사하여 붙여 넣으려고 시도했지만 이미지가 나타나지 않았습니다. 정확한 이름을 가진 이미지가 있습니다. html 페이지와 같은 폴더, 어떤 아이디어? –

+0

예. 나는 대답을 업데이트 할 것이다. – Shanimal

0

당신이 그들 페이지를 다시로드에 순서대로 표시 할 경우 조금 이상하지만 괜찮음) URL에 색인을 전달해야합니다 (예 :

).
function showImage(){ 
    var theImages = new Array() 

    theImages[0] = '100.jpg' 
    theImages[1] = '200.jpg' 
    theImages[2] = '300.jpg' 
    theImages[3] = '400.jpg' 
    theImages[4] = '500.png' 

    var j = 0 
    var p = theImages.length; 

    var preBuffer = new Array() 
    for (i = 0; i < p; i++){ 
     preBuffer[i] = new Image() 
     preBuffer[i].src = theImages[i] 
    } 

    var index = location.hash || 0; 
    if (index >= p) index = 0; 

    var img = document.createElement('img'); 
    img.src = theImages[index]; 

    //replace document.body here with a reference to where you want the image to go 
    document.body.appendChild(img); 
    location.hash = index++; 
} 

위치를 사용하는 경우 .hash. 다른 것들에 대한 해쉬는 수동으로 파싱을해야하는데, 그렇게 어려운 것은 아닙니다.

+0

그건 작동하지 않습니다. 페이지가로드 된 후 document.write를 처음 호출하면 document.write에 의해 작성된 것을 제외하고 페이지의 전체 내용이 삭제됩니다. – RobG

+0

@RobG - 잘 잡으십시오, 나는 document.write를 사용하지 않습니다. 어쨌든 나는 고치기 위해 편집했다. – hobberwickey

+0

안녕하세요, 귀하의 코드를 시도했지만 그림 대신 나타나는, 거기에 그림이 있어야하는 작은 이미지 "아이콘"을 얻을, 나는 요소를 검사하고 "정의되지 않은"어떤 생각? –

0

스크립트에 두 개의 showImage 함수가 있습니다. 어느 것이 옳지 않습니다. 하지만 forImages [i]를 for 루프에서 사용하기 위해 이들을 표시하려면 그냥 임의 비트를 제거하십시오. 두 경우 모두 두 가지 기능을 수행해야합니다. 하나는 무작위로, 다른 하나는 주문입니다. showImageRandom() 및 showImage()와 같습니다.

관련 문제