jQuery : 背景画像のクロスフェード (プラグイン無し) - Web

プラグイン無しでやる、ﾒﾓﾒﾓ????????

See the Pen xdZKBr by HomeMadeGarbage (@hmg) on CodePen.

CodePen 楽しい！（初めて使った）

参考にさせて頂きました

jQueryで背景画像をフェードイン・フェードアウト
　

HTML側で画像を指定する形

2017.07.03 追記

HTML

<div class="slider">
  <p>背景画像のクロスフェード</p>
　 　<div class="slide" style="background-image: url(img-1.jpg);"></div>
　 　<div class="slide" style="background-image: url(img-2.jpg);"></div>
　 　<div class="slide" style="background-image: url(img-3.jpg);"></div>
</div>

<p>背景画像のクロスフェード</p>

</div>

CSS

.slide {
  position: absolute;
  top: 0;
  left: 0;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  z-index: -1;
}
.slide:not(:first-child) {
  display: none;
}

.slide {

position: absolute;

top: 0;

left: 0;

background-repeat: no-repeat;

background-position: center center;

background-size: cover;

z-index: -1;

}

.slide:not(:first-child) {

display: none;

}

jQuery

function slide() {
  var speed = 3000;
  var interval = 5000; 
  var slide = $('.slider .slide');

  var count = 0;
  var length = slide.length-1;
  setInterval(function(){
    $(slide[count]).fadeOut(speed);
    if ( count >= length ) {
      count = 0;
    } else {
      count++;
    }
    $(slide[count]).fadeIn(speed);
  }, interval);
}

function slide() {

var speed = 3000;

var interval = 5000;

var slide = $('.slider .slide');

var count = 0;

var length = slide.length-1;

setInterval(function(){

$(slide[count]).fadeOut(speed);

if ( count >= length ) {

count = 0;

} else {

count++;

}

$(slide[count]).fadeIn(speed);

}, interval);

}

JavaScript 勉強中… 買ってまだ全然読めてない＞＜

「jQuery : 背景画像のクロスフェード (プラグイン無し)」への2件のフィードバック

コメントはこちらからコメントをキャンセル

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

参考にさせて頂きました

HTML側で画像を指定する形

関連記事

「jQuery : 背景画像のクロスフェード (プラグイン無し)」への2件のフィードバック

コメントはこちらから コメントをキャンセル

コメントはこちらからコメントをキャンセル