クロスフェード - web-0127のブログ

JavaScriptでクロスフェード

jQueryのバージョンを確認する
APIかダウンロードかを決める

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

Brand Spanking New

<script>
window.onload = function() {
var cf = new Crossfader( new Array('cf1','cf2','cf3', 'cf4', 'cf5'), 500, 2000 );
}
</script>

500はフェードエフェクトの時間（0.5秒）
2000は各画像の表示時間（2秒）

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Crossfader</title>
<style>
html, body, div, ul, img {
  margin: 0;
  padding: 0;
}
ul {
  list-style: none;
}
img {
  border: none;
  vertical-align: bottom;
}
#container {
  width: 640px;
  margin: 50px auto;
}
</style>
<script src="js/bsn.js"></script>
</head>
<body>
<div id="container">
<ul id="img_fader">
<li id="img1"><img src="img/ph01.jpg" alt=""></li>
<li id="img2"><img src="img/ph02.jpg" alt=""></li>
<li id="img3"><img src="img/ph03.jpg" alt=""></li>
<li id="img4"><img src="img/ph04.jpg" alt=""></li>
</ul>
<script>
  var cf = new Crossfader( new Array('img1', 'img2', 'img3', 'img4'), 2000, 3000 );
</script>
</div>
</body>
</html>

Download Crossfader.js

CrossSlide-fade

必要なjQueryを読み込む

<script src="js/jquery.min.js"></script>
<script src="js/jquery.cross-slide.min.js"></script>

IDセレクタ「slideshow」を設定

<div id="slideshow"></div>

CSSファイルにスライド表示の面積を指定する

#slideshow {
  width: 幅;
  height: 高さ;
}

head内にscriptを記述するか、script.jsを外部リンクする

<script>
  $(function() {
    $('#slideshow').crossSlide({
      sleep: 2,
      fade: 1
    }, [
      { src: '画像１.jpg' },
      { src: '画像２.jpg' },
      { src: '画像３.jpg' },
      { src: '画像４.jpg' }
    ])
  });
</script>

スライドショーの再生回数を１回にする

loop: 1

Static cross-fade

$('#slideshow').crossSlide({
  sleep: 2,
  fade: 1
}, [
  { src: '画像１.jpg' },
  { src: '画像２.jpg' },
  { src: '画像３.jpg' },
  { src: '画像４.jpg' }
]);

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTFf-8">
<title>JavaScriptでスライド（１）</title>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery.cross-slide.min.js"></script>
<style>
body {
	text-align: center;
}
#slideshow {
  width: 400px;
  height: 300px;
	margin: 100px auto 0 auto;
}
</style>
</head>
<body>
<div id="slideshow"></div>
<script>
  $(function() {
    $('#slideshow').crossSlide({
      sleep: 3,
      fade: 2
    }, [
      { src: 'images/01_o.jpg' },
      { src: 'images/02_o.jpg' },
      { src: 'images/03_o.jpg' },
      { src: 'images/04_o.jpg' },
      { src: 'images/05_o.jpg' }
    ])
  });
</script>
</body>
</html>

Slide and cross-fade

大きい写真をずらす

$('#slideshow').crossSlide({
  speed: 45,
  fade: 1
}, [
  { src: '画像１.jpg', dir: 'up'   },
  { src: '画像２.jpg', dir: 'down' },
  { src: '画像３.jpg', dir: 'up'   },
  { src: '画像４.jpg', dir: 'down' }
]);

Ken Burns effect

$('#slideshow').crossSlide({
  fade: 1
}, [
  {
    src:  '画像１.jpg',
    alt:  '画像１',
    from: '100% 80% 1x',
    to:   '100% 0% 1.7x',
    time: 3
  }, {
    src:  '画像２.jpg',
    alt:  '画像２',
    from: 'top left',
    to:   'bottom right 1.5x',
    time: 2
  }, {
    src:  '画像３.jpg',
    alt:  '画像３',
    from: '100% 80% 1.5x',
    to:   '80% 0% 1.1x',
    time: 2
  }, {
    src:  '画像４.jpg',
    alt:  '画像４',
    from: '100% 50%',
    to:   '30% 50% 1.5x',
    time: 2
  }
], function(idx, img, idxOut, imgOut) {
  if (idxOut == undefined)
  {
    // starting single image phase, put up caption
    $('div.caption').text(img.alt).animate({ opacity: .7 })
  }
  else
  {
    // starting cross-fade phase, take out caption
    $('div.caption').fadeOut()
  }
});

Ken Burns variant

$('#slideshow').crossSlide({
  fade: 1,
  variant: true,
  easing: 'easeInOutQuad'
}, [
  // as above
]);