0

各「スライド」を効果的に見て、その中のすべての「フレーム」を一度に1つずつ非表示にし、次のスライドを見て、その中のすべてのフレームを再表示するカスタム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見えるため、.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>

これを解決するために誰かが私を助けたり、正しい方向に向けたりすることができれば、それは大歓迎です!

4

0 に答える 0