JavaScript

CSSを使ってフェイドするスライド実装

More than 3 years have passed since last update.

/*

* -- Slider --
* slider plugins class
*/

.slide {
visibility: hidden;
opacity: 0;
z-index: -1;
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-ms-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;
}

.slide.active {
visibility: visible;
opacity: 1;
z-index: 10;
-webkit-transition: all 2s ease-in-out 1s;
-moz-transition: all 2s ease-in-out 1s;
-ms-transition: all 2s ease-in-out 1s;
-o-transition: all 2s ease-in-out 1s;
transition: all 2s ease-in-out 1s;
}

  $.fn.roopSlider = function(options) {

$this = $(this)

var settings = $.extend( {
'speed': 5000,
'start': 0
}, options);

var Slider = function(obj){
$slide = $(obj).find('.slide')
$slide[settings.start].classList.add('active')

setTimeout(function(){
roop();
},settings.speed);
};

var getActive = function(){
return $this.find('.active')
}

var getNext = function(){
$active = getActive()
if ($active.next('.slide').length == 0) {
return $this.find('.slide').first()
}

return $active.next('.slide')
}

var roop = function(){
active = getActive();
next = getNext();

active.removeClass('active');
next.addClass('active');

setTimeout(function(){
roop();
},settings.speed);
};

あとはjavasriptでactiveクラスを切り替えるだけ