JavaScript + Ajax 実践サンプル集 - jQueryとHTML5のCanvasを利用してスライドショーを実装する

jQueryとHTML5のCanvasを利用してスライドショーを実装する

説明補足説明コード関連書籍コメント投稿

このサンプルは、HTML5のCanvas要素とjQueryを使用してスライドショーを実装します。サンプルが表示されたらイメージの左右に表示されている矢印ボタンをクリックしてイメージを切り替えてください。このサンプルは、IE9(beta), Firefox, Safari, Chromeで動作します。IE9を使用するときは、「互換表示」を解除してIE9のネイティブモードでご覧ください。

このサンプルを編集して試してみる

このサンプルの解説とソースのダウンロードは、ここをご覧ください。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>An HTML5 Slideshow w/ Canvas & jQuery</title>
  <link href="jQuery/html5Slideshow/styles.css" rel="stylesheet" type="text/css" />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
  
  <script type="text/javascript">
    $(window).load(function () {
      var supportCanvas = 'getContext' in document.createElement('canvas');
      var slides = $('li'),
		current = 0,
		slideshow = { width: 0, height: 0 };

setTimeout(function () {

window.console && window.console.time && console.time('Generated In');

if (supportCanvas) {
          $('#slideshow img').each(function () {

if (!slideshow.width) {
              slideshow.width = this.width;
              slideshow.height = this.height;
            }

createCanvasOverlay(this);
          });
        }

window.console && window.console.timeEnd && console.timeEnd('Generated In');

$('#slideshow .arrow').click(function () {
          var li = slides.eq(current),
				      canvas = li.find('canvas'),
				      nextIndex = 0;

if ($(this).hasClass('next')) {
            nextIndex = current >= slides.length - 1 ? 0 : current + 1;
          }
          else {
            nextIndex = current <= 0 ? slides.length - 1 : current - 1;
          }

var next = slides.eq(nextIndex);

if (supportCanvas) {

canvas.fadeIn(function () {

next.show();
              current = nextIndex;

li.fadeOut(function () {
                li.removeClass('slideActive');
                canvas.hide();
                next.addClass('slideActive');
              });
            });
          }
          else {
            current = nextIndex;
            next.addClass('slideActive').show();
            li.removeClass('slideActive').hide();
          }
        });

}, 100);

function createCanvasOverlay(image) {

var canvas = document.createElement('canvas'),
			  canvasContext = canvas.getContext("2d");

canvas.width = slideshow.width;
        canvas.height = slideshow.height;

canvasContext.drawImage(image, 0, 0);

var imageData = canvasContext.getImageData(0, 0, canvas.width, canvas.height),
			  data = imageData.data;

for (var i = 0, z = data.length; i < z; i++) {

data[i] = ((data[i] < 128) ? (2 * data[i] * data[i] / 255) : (255 - 2 * (255 - data[i]) * (255 - data[i]) / 255));
          data[++i] = ((data[i] < 128) ? (2 * data[i] * data[i] / 255) : (255 - 2 * (255 - data[i]) * (255 - data[i]) / 255));
          data[++i] = ((data[i] < 128) ? (2 * data[i] * data[i] / 255) : (255 - 2 * (255 - data[i]) * (255 - data[i]) / 255));

++i;
        }

canvasContext.putImageData(imageData, 0, 0);

image.parentNode.insertBefore(canvas, image);
      }

});
  
  </script>
</head>
<body>
  <div id="slideshow">
    <ul class="slides">
      <li>
        <img src="jQuery/html5Slideshow/img/photos/1.jpg" width="620" height="320" alt="Marsa Alam underawter close up" /></li>
      <li>
        <img src="jQuery/html5Slideshow/img/photos/2.jpg" width="620" height="320" alt="Turrimetta Beach - Dawn" /></li>
      <li>
        <img src="jQuery/html5Slideshow/img/photos/3.jpg" width="620" height="320" alt="Power Station" /></li>
      <li>
        <img src="jQuery/html5Slideshow/img/photos/4.jpg" width="620" height="320" alt="Colors of Nature" /></li>
    </ul>
    <span class="arrow previous"></span><span class="arrow next"></span>
  </div>
  <p class="credit">
    Photos by <a href="http://www.flickr.com/photos/ac_theart/3835954685/#/">Andrea Costa</a>,
    <a href="http://www.flickr.com/photos/7818801@N03/4996330017">Big Jobs</a>, <a href="http://www.flickr.com/photos/jbgoblin/4160580726/">
      johnb/uk</a>, <a href="http://www.flickr.com/photos/gorditojaramillo/368461921/">gorditojaramillo</a></p>

</body>
</html>

コメント・提案の投稿！

名前
メール
件名
本文

JavaScript + Ajax 実践サンプル集 (1530本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... »»jQueryテンプレート42選!

jQueryとHTML5のCanvasを利用してスライドショーを実装する

JavaScript + Ajax 実践サンプル集 (1530本以上) ◇編集して実行可能◇

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... »»jQueryテンプレート42選!

jQueryとHTML5のCanvasを利用してスライドショーを実装する

JavaScript + Ajax 実践サンプル集 (1530本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... »»jQueryテンプレート42選!