Проблема с разрушаемым слайд-шоу JavaScript - PullRequest
Новая
       3

Проблема с разрушаемым слайд-шоу JavaScript

2 голосов
/ 16 февраля 2011

ОБНОВЛЕНИЕ: я отредактировал код ниже, чтобы показать, что я использовал, когда пытался работать с видимостью CSS. Я все еще застрял с этой проблемой. Я также пытался удалить функцию preloader () из тела onLoad, но я не могу использовать getElementById, потому что элемент не загружен. Моя последняя мысль состояла в том, чтобы просто вызвать rand (5) из самого HTML-кода, чтобы он добавлял число в конец имени файла изображения, если Javascript включен, но я даже не уверен, как включить это непосредственно в HTML. Любая помощь будет принята с благодарностью!

Я создал слайд-шоу с помощью Javascript. HTML вызывает статическое изображение для отображения в случае, если Javascript не включен в браузере. Если Javascript включен в браузере, он должен загрузить случайное изображение вместо статического изображения.

Проблема, с которой я сталкиваюсь, заключается в том, что когда Javascript включен, вы видите статическое изображение, загружаемое страницей, а затем, если случайное изображение отличается, вы видите, что оно быстро загружается сразу после этого. Так что, похоже, два изображения быстро зацикливаются при загрузке страницы.

Вот код Javascript, который я использую: 

// 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: 

<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>

Как мне изменить то, что у меня есть, поэтому, когда Javascript включен, вы не видите два изображения зацикливания?

Ответы [ 2 ]

2 голосов
/ 16 февраля 2011

В вашем preLoader() манипулируйте стилем, чтобы скрыть элементы, которые вы хотите скрыть, если включен JavaScript.

Таким образом, если он включен, элементы будут скрываться, а если нет, то ясно, что JavaScript, скрывающий их, не будет работать.

Пример 

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

domElement.style.display = 'none';
0 голосов
/ 18 июня 2011

Это код JavaScript, который решил мою проблему: 

// 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];
}
...