분해성 JavaScript 슬라이드 쇼 관련 문제

업데이트 : 아래의 코드를 편집하여 CSS 공개 상태로 작업 할 때 사용하고있는 것을 보여 줬습니다. 나는 아직도이 문제에 붙어있다. 또한 body onLoad에서 preloader() 함수를 제거하려고했지만 요소가로드되지 않았으므로 getElementById를 사용할 수 없습니다. 내 마지막 생각은 HTML 자체 내에서 rand (5)를 호출하여 Javascript가 활성화 된 경우 이미지 파일 이름의 끝에 숫자를 추가하는 것이었지만 HTML에 직접 삽입하는 방법조차 모릅니다. 어떤 도움이라도 대단히 감사하겠습니다!분해성 JavaScript 슬라이드 쇼 관련 문제

자바 스크립트로 슬라이드 쇼를 만들었습니다. HTML은 브라우저에서 Javascript가 활성화되지 않은 경우 표시 할 정적 이미지를 호출합니다. 브라우저에서 Javascript가 활성화되어 있으면 정적 이미지 대신 임의의 이미지를로드해야합니다.

내가 겪고있는 문제는 자바 스크립트를 사용할 때 페이지가있는 정적 이미지로드를보고 임의의 이미지가 다르면 바로 그 후에 바로로드되는 것을 볼 수 있습니다. 따라서 페이지로드시 두 개의 이미지가 빠르게 순환됩니다. '내가 자바 스크립트가 활성화 될 때, 그래서 당신이 돈이 무엇을 어떻게 변경합니까

<body onLoad="preloader();random_img();"> 
. 
. 
. 
<a href="#" onclick="f_slideshow(-1);return false;"> 
<img src="images/header_img1.png" alt="" width="26" height="207" /></a> 
<img src="images/header_img1.jpg" alt="" width="529" height="197" class="img-1" name="faces" /> 
<a href="#" onclick="f_slideshow(1);return false;"> 
<img src="images/header_img2.png" alt="" width="27" height="207" /></a>

: 여기

// Define images used in slideshow 
imgArray = new Array(
"header_img1.jpg", 
"header_img2.jpg", 
"header_img3.jpg", 
"header_img4.jpg", 
"header_img5.jpg" 
); 
baseURL = "images/"; 

// Preload slideshow images 
function preloader() { 

    domElement = document.getElementById('gallery-image'); 
    domElement.style.visibility = "hidden"; 

    // counter 
    var i = 0; 

    // create object 
    imageObj = new Image(); 

    // start preloading imgArray 
    for (i=0; i<3; i++) { 
     imageObj.src=imgArray[i]; 
    } 
} 


// Select random image to display for slideshow 
function random_img() { 

    domElement.style.visibility = "visible"; 
    rand = Math.round(Math.random()*(imgArray.length - 1)); 
    document["faces"].src = baseURL + imgArray[rand]; 
    rand += 1; 
}

가 첨부 된 HTML입니다 : 여기

내가 사용하고 자바 스크립트 코드 두 개의 자전거 이미지가 보이지 않습니까?

출처

2011-02-16 Yazmin

이것은 내 문제 해결 자바 스크립트 코드 :

// Define images used in slideshow 
imgArray = new Array(
    "header_img1.jpg", 
    "header_img2.jpg", 
    "header_img3.jpg", 
    "header_img4.jpg", 
    "header_img5.jpg" 
); 
baseURL = "images/"; 


// Hide static image and preload slideshow images 
function preloader() { 

    // counter 
    var i = 0; 

    // create object 
    imageObj = new Image(); 

    // start preloading imgArray 
    for (i=0; i<3; i++) { 
     imageObj.src=imgArray[i]; 
    } 

} 

// Control previous/next functions of slideshow 
numImages = imgArray.length; 
function f_slideshow(xflip) { 

    // grab source of current image 
    var curImage = document["faces"].src; 

    // get image number from string and convert to int 
    curImage = parseInt(curImage.substring(curImage.length-5, curImage.length)); 

    // create source for next/previous link 
    curImage = curImage + xflip; 
    if (curImage > numImages) 
     { curImage = 1 ; } 
    if (curImage == 0) 
     { curImage = numImages ; }  
    document["faces"].src = baseURL + imgArray[curImage - 1]; 
}

출처

2011-06-17 22:32:54 Yazmin

preLoader()에서 자바 스크립트가 사용되는 경우 숨기려는 요소를 숨기려면 스타일을 조작하십시오.

이렇게하면 요소가 숨겨집니다. 그렇지 않으면 요소가 숨겨지기 때문에 javascript가 실행되지 않습니다.

예를

var domElement = document.getElementById('id-of-element'); 

domElement.style.display = 'none';

출처

2011-02-16 17:27:44 jondavidjohn

가 감사를! 이것은 올바른 방향으로 나아갔습니다. 대신 가시성을 조작하여 이미지가 여전히 동일한 공간을 점유 한 다음 'random_img()'의 시작 부분에서 요소를 볼 수있게했습니다. 매력처럼 작동합니다. 도와 줘서 고마워! – Yazmin

이 답변을 선택 취소 한 이유가 무엇입니까? – jondavidjohn

예. 내가 전화를 받았을 때 설명을 쓰는 중이었습니다. Firefox에서이 솔루션을 확인하지 못했습니다. 나는 아직도 초기 이미지로드와 그 다음 무작위 이미지로드를보고있다. 다음은 문제가있는 사이트입니다. http://yazminmedia.com/clients/wbailey/index.html – Yazmin