0

我正在构建一个自定义 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但似乎没有返回任何元素，因此序列没有运行。这个问题不会出现在函数中，即使它们实际上除了值之外是相同的。.findaddFrames.eachremoveFramesopacity

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>

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

4

0 回答 0