Javascript слайд-шоу отлично работает дважды, затем выдает ошибки - PullRequest
Новая
       8

Javascript слайд-шоу отлично работает дважды, затем выдает ошибки

0 голосов
/ 22 января 2012

Я следовал учебному пособию, чтобы создать простое слайд-шоу на JavaScript, но у меня странная ошибка ... Первые 2 цикла работают отлично, но как только счетчик сбрасывает слайд-шоу, начинается быстрый показ предыдущего слайда, а затем попытка исчезнуть в правильном горка. Есть идеи, что вызывает это?

У меня есть 3 изображения (с именами Image1.png, Image2.png и Image3.png) в папке для моего простого слайд-шоу и 3 дива, настроенных так: 

    <div id="SlideshowFeature">
        <div id="counter">
            3
        </div>
        <div class="behind">
            <img src="SlideShow/image1.png" alt="IMAGE" />
        </div>
        <div class="infront">
            <img src="SlideShow/image1.png" alt="IMAGE" />
        </div>
    </div>

Мой JavaScript выглядит так 

var nextImage;
var imagesInShow;
var currentImage;
var currentSrc
var nextSrc

function changeImage() {
    imagesInShow = "3";
    currentImage = $("#counter").html();
    currentImage = parseInt(currentImage);


    if (currentImage == imagesInShow) {
        nextImage = 1;
    }
    else {
        nextImage = currentImage + 1;
    }

    currentSrc = $(".infront img").attr("src");
    nextSrc = "SlideShow/image" + nextImage + ".png";

    $(".behind img").attr("src", currentSrc);

    $(".infront").css("display", "none");

    $(".infront img").attr("src", nextSrc);

    $(".infront").fadeIn(1000);

    $("#counter").html(nextImage);

    setTimeout('changeImage()', 5000);


}

$(document).ready(function () {
    changeImage();
});

EDIT:

Также вот мой CSS 

#SlideshowFeature
{
text-align:center;
margin: 0 auto;
width:800px;
background: #02183B;
height:300px;
float: left;
overflow:hidden;
display:inline;

}

#SlideshowFeature div
{
    width: 800px;
    height:300px;
    position:absolute;
}

#counter
{
    display:none;
}

Ответы [ 2 ]

0 голосов
/ 22 января 2012

. Впереди должны быть впереди, а. Позади должны быть позади 

    .behind {
        z-index: 1;
    }
    .infront {
        z-index: 255;
    }

И я также переместил логику повторного планирования в обратный вызов fadeIn: 

$(".infront").fadeIn(1000, function(){setTimeout('changeImage()', 2500)});

$("#counter").html(nextImage);

//setTimeout('changeImage()', 2500);

Выглядит хорошо для меня сейчас.

0 голосов
/ 22 января 2012

Кажется, проблема в вашей структуре HTML (а не в вашем JS): 

...
<img src="SlideShow/image1.png" alt="IMAGE" />
...
<img src="SlideShow/image1.png" alt="IMAGE" />
...

Я думаю, что вы хотели поставить image1.png, а затем image2.png

...