Question

我正在构建一个自定义jQuery幻灯片，它可以有效地查看每个“幻灯片”并一次隐藏其中的所有“框架”，并查看和下一张幻灯片，并取消隐藏其中的所有框架。很简单。

幻灯片在Chrome和Firefox中完美运行，但在IE9中却没有（在IE8或更低版本中尚未测试）。在IE9中，脚本成功隐藏了当前幻灯片中的帧，但并未取消隐藏在下一张幻灯片中的帧。

使用Javascript：

function slideshow(){

var slides = $('.slide'); //all slides
var delay = 8000; // 3s //delay between slides. must be at least 3 times speed
var speed = 3500;
var gap = 1000;

//for each slide
$.each(slides, function(index, value){ 

    //run animation function after each delay
    setTimeout(function(){
        changeSlides(index);
    }, delay + (delay * index));
});

function changeSlides(i){
    lastIndex = slides.length - 1;
    prevIndex = i-1;
    nextIndex = i+1;

    curSlide = slides[i];
    prevSlide = slides[prevIndex];
    nextSlide = slides[nextIndex];
    firstSlide = slides[0];
    lastSlide = slides[lastIndex];

    $(curSlide).removeClass("active-slide");
    removeFrames(curSlide);

    if (i == (lastIndex)){ // if last slide 
        $(firstSlide).addClass("active-slide");
        addFrames(firstSlide);
        slideshow();
    }else{
        $(nextSlide).addClass("active-slide");
        addFrames(nextSlide);
    }
};

function removeFrames(slide){
    remFrames = $(slide).find('.frame');
    console.log(remFrames); 
    $.each(remFrames, function(index, value){

        setTimeout(function(){
            frame = remFrames[index];
            $(frame).animate({"opacity" : 0}, speed);

        }, gap + (gap * index));

    });
};

function addFrames(slide){
    frames = $(slide).find('.frame');

    $.each(frames, function(index, value){

        setTimeout(function(){
            frame = frames[index];
            $(frame).animate({"opacity" : 1}, speed);

        }, gap + (gap * index));

    });
};



};

slideshow();

在IE中，removeFrames无故障运行，但.find中的addFrames似乎未能返回任何元素，因此.each序列未运行。 removeFrames函数中不会出现此问题，即使它们与opacity值之外几乎相同。

HTML：

<div class="slideshow">
<!-- 1 -->
<div class="slide v-pair active-slide">
    <div class="grid-wrap">
            <div class="grid-col col-one-half frame">
                <img src="assets/img/photos/ferme-fireplace.jpg" alt="La Ferme d'elise" />
            </div>
            <div class="grid-col col-one-half frame">
                <img src="assets/img/photos/ferme-ext.jpg" alt="La Ferme d'elise" />
            </div>
    </div>
</div>

<!-- 2 -->
<div class="slide h-pair">
    <div class="frame">
        <img src="assets/img/photos/ferme-night.jpg" alt="La Ferme d'elise" class="h-image" />
    </div>
    <div class="frame">
        <img src="assets/img/photos/ferme-group.jpg" alt="La Ferme d'elise" class=" frame" />
    </div>
</div>

<!-- 3 -->
<div class="slide full">
    <div class="frame">
        <img src="assets/img/photos/ferme-dining.jpg" alt="La Ferme d'elise" class="frame" />
    </div>
</div>

<!-- 4 -->
<div class="slide v-trio">
    <div class="grid-wrap">
            <div class="grid-col col-one-half frame">
                <img src="assets/img/photos/ferme-fireplace.jpg" alt="La Ferme d'elise" />
            </div>
            <div class="grid-col col-one-half frame">
                <div class="h-col">
                    <img src="assets/img/photos/ferme-suite-alt.jpg" alt="La Ferme d'elise" />
                </div>
                <div class="h-col frame">
                    <img src="assets/img/photos/ferme-lounge-alt.jpg" alt="La Ferme d'elise" />
                </div>
            </div>
    </div>
</div>

<!-- 5 -->
    <div class="slide h-trio">
        <img src="assets/img/photos/ferme-night.jpg" alt="La Ferme d'elise" class="h-image frame" />
        <div class="grid-wrap">
            <div class="grid-col col-one-half frame">
                <img src="assets/img/photos/ferme-lounge.jpg" alt="La Ferme d'elise" />
            </div>
            <div class="grid-col col-one-half frame">
                <img src="assets/img/photos/ferme-suite.jpg" alt="La Ferme d'elise" />
            </div>
        </div>
    </div>
</div>

如果有人可以帮助或指出我正确的方向来解决这个问题，我们将不胜感激！

jQuery和IE的问题

0 个答案: