各「スライド」を効果的に見て、その中のすべての「フレーム」を一度に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
なく動作しますが、 が要素を返さないよう.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>
これを解決するために誰かが私を助けたり、正しい方向に向けたりすることができれば、それは大歓迎です!