Проблема рекурсии в JavaScript - PullRequest
Новая
       9

Проблема рекурсии в JavaScript

0 голосов
/ 12 апреля 2011

Я пытаюсь написать функцию, которая будет переключаться между массивом изображений.То, что у меня есть, имеет для меня смысл, но когда я запускаю его, как показано ниже, загружается первое изображение, затем второе изображение загружается в какой-то момент (прозрачность не меняется), и тогда ничего не происходит.Вот код JavaScript: 

        var image1 = new Image();var image2 = new Image(); var image3 = new Image();
        image1.src = "images/website6.jpg"; image2.src = "images/website7.jpg"; image3.src = "images/sunset.jpg";
        var images = new Array("images/website6.jpg","images/website7.jpg","images/sunset.jpg");
        /*document.slide.style.opacity = 1;
        document.slide.stylebg.opacity = 0;*/
        setTimeout(function() { fade(images,0); }, 2000);
        function delay(arr,num)
        {
            document.slide.src = arr[num % 3];
            document.slide.style.opacity = 1;
            document.slidebg.style.opacity = 0;
            document.slidebg.src = arr[(num+1)%3];
            var number = num + 1;
            setTimeout(function() { fade(arr,number); }, 2000);
        }
        function fade(arr,num)
        {
            /*alert('fadebefore ' + (document.slide.style.opacity).toString())*/
            document.slide.style.opacity -= 0.1
            /*alert('fade')*/
            document.slide.stylebg.opacity += 0.1
            if (document.slide.style.opacity == 0)
            {
                setTimeout(function() { delay(arr,num); }, 150);
            }
            else
            {
                setTimeout(function() { fade(arr,num); }, 1500);
            }
        }

HTML прост.У меня есть два класса;style и stylebg.style сидит перед stylebg, а затем я изменяю непрозрачность и изображения по мере необходимости.Javascript кажется мне логичным, но он не работает, как ожидалось.Также стоит отметить, что есть 3 комментария.Первый комментарий (строка 3-4) пытается установить непрозрачность на то, что они должны быть в начале.Однако, если я сделаю это, то получу еще меньший прогресс, чем выше: первое изображение загружается, и больше ничего не происходит.Вторые два комментария используются для целей отладки.Если я раскомментирую их, то между двумя предупреждениями произойдет смена изображения, что, по-видимому, говорит о том, что смена изображения вызвана изменением непрозрачности.

Так кто-нибудь может объяснить, почему он не делает то, что я ожидаю?Спасибо.

РЕДАКТИРОВАТЬ: Еще немного кода:

HTML (Это единственная часть, на которую влияют): 

<div style="position: relative;">
<img src="images/sunset.jpg" id="slide" />
<img src="images/website6.jpg" id="slidebg" />
</div>

CSS: 

#slide{
    display:block;
    margin-left:5;
    margin-right:auto;
    border: 1px solid black;
    z-index: 1;
    top: 0px;
    position: relative;
}
#slidebg{
    display:block;
    margin-left:auto;
    margin-right:auto;
    border: 1px solid black;
    z-index: 0;
    top: 0px;
    position: absolute;
}

Ответы [ 3 ]

0 голосов
/ 12 апреля 2011

РЕДАКТИРОВАТЬ2

у меня работает (хром) 

var images = new Array ();
images[0] = new Image();
images[0].src = "images/website6.jpg";
images[1] = new Image();
images[1].src = "images/website7.jpg";
images[2] = new Image();
images[2].src = "images/sunset.jpg";

function delay ( arr, num )
{
  slide.src = arr[num % 3].src;
  slide.style.opacity = 1;
  slidebg.style.opacity = 0;
  slidebg.src = arr[(num+1)%3].src;
  var number = num + 1;
  setTimeout(function() { fade(arr,number); }, 2000);
}

function fade(arr, num)
{
  if ( slide.style.opacity == 0 )
  setTimeout(function (){ delay(arr, num); }, 150);
  else
  {
    slide.style.opacity = (slide.style.opacity*10 - 1)/10 ;
    slidebg.style.opacity -= -0.1;
    setTimeout ( function(){fade(arr,num);}, 1500 );
  }
}
fade (images, 0);

АГА!

<img id="img_id"/> мы можем получить document.img_id, даже в хроме

ОК, ОК, удалены ссылки на этот МЫ ОБУЧАЕМ ВАМ ОТКАЗАТЬ НА ВЕБ-ДЕВ сайт ..

0 голосов
/ 12 апреля 2011

Ответы за форматирование.Я не отлаживал, чтобы посмотреть, что будет работать, но для меня это имеет больше смысла

Если вы хотите использовать ID, используйте document.getElementById, если вы хотите использовать имя, используйте document.images [imgname] илиdocument.imagename Вы смешиваете имена и стиль тоже.document.slide.stylebg.opacity и такие

Это что-то делает.Не уверен, что это то, что вы хотите: http://jsfiddle.net/EcShW/2/

<div style="position: relative;">
<img src="images/sunset.jpg" id="slide" name="slide" />
<img src="images/website6.jpg" id="slidebg" name="slidebg" />
</div>


    var images = []; // can be more elegant, but this is simpler
    images[0]=new Image(); images[0].src="images/website6.jpg";
    images[1]=new Image(); images[1].src="images/website7.jpg";
    images[2]=new Image(); images[2].src="images/sunset.jpg"; 
    var tid1,tid2,tid3
    tid1=setTimeout(function() { fade(images,0); }, 2000);
    function delay(arr,num)
    {
        document.slide.src = arr[num % 3].src;
        document.slide.style.opacity = 1;
        document.slidebg.style.opacity = 0;
        document.slidebg.src = arr[(num+1)%3].src;
        var number = num + 1;
        tid2=setTimeout(function() { fade(arr,number); }, 2000);
    }
    function fade(arr,num)
    {
        document.slide.style.opacity -= 0.1
        document.stylebg.style.opacity += 0.1
        if (document.slide.style.opacity == 0)
        {
            tid3=setTimeout(function() { delay(arr,num); }, 150);
        }
        else
        {
            tid3=setTimeout(function() { fade(arr,num); }, 1500);
        }
    }
0 голосов
/ 12 апреля 2011

Вы не можете просто ссылаться на элементы страницы по значению "id"; Вы должны использовать «document.getElementById ()»: 

 var slideElement = document.getElementById('slide'), slidebgElement = document.getElementById('slidebg');

Тогда вы будете работать с «slideElement.style» и т. Д. Вместо «document.slide.style».

...