JavaScript + Ajax 実践サンプル集 - jQueryを利用したオートスライドショー

jQueryを利用したオートスライドショー

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

このサンプルは、jQueryのanimate() apiを利用してオートスライドショーを実装しています。サンプルが表示されると1.5秒間隔でイメージが切り替わります。イメージにマウスを移動するとスライドが停止します。イメージからマウスを外すとオートスライドを再開します。手動でスライドさせるには左右の矢印ボタンをクリックします。下のサムネイルをクリックして切り替えることもできます。IE6の透過PNGにも対応しています。

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

このサンプルを本番で利用するには、寄付が必要になります。

<!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>jQuery Auto-Photo-Slide</title>
  <link href="jQuery/jqueryAutoSlideshow/style.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">
    /* ================================================================ 
    This copyright notice must be untouched at all times.
    Copyright (c) 2009 Stu Nicholls - stunicholls.com - all rights reserved.
    =================================================================== */
    onload = function () {

timer = 0;
      current = 1;
      button = 1;

showTime = 1500; // 4500

pictures = $('#buttons div img').length;
      width = $('#p1 img').outerWidth();

$('#buttons div img').animate({ opacity: 0.4 });
      $('#buttons #b1 img').animate({ opacity: 1 });
      $('#buttons #b1 img').css("borderColor", "#888");

$('#p1').animate({ "left": "0px" }, 400, "swing");
      $('#loading').css("display", "none");

timer = setTimeout("autoPlay()", showTime);

$("#next").click(function () {
        button = current;
        current++
        if (current == (pictures + 1)) { current = 1 }
        animateLeft(current, button)
      });

$("#previous").click(function () {
        button = current;
        current--
        if (current == 0) { current = pictures }
        animateRight(current, button)
      });

$("#buttons div").click(function () {
        button = current;
        clickButton = $(this).attr('id');
        current = parseInt(clickButton.slice(1));
        if (current > button) { animateLeft(current, button) }
        if (current < button) { animateRight(current, button) }
      });

$("#wrap").mouseover(function () { clearTimeout(timer); });
      $("#wrap").mouseout(function () { timer = setTimeout("autoPlay()", showTime); });

}

function autoPlay() {
      button = current;
      current++
      if (current == (pictures + 1)) { current = 1 }
      animateLeft(current, button)

timer = setTimeout("autoPlay()", showTime);
    }

function setbutton() {
      $('#b' + button + ' img').animate({ opacity: 0.4 })
						.css("borderColor", "#444");
      $('#b' + current + ' img').animate({ opacity: 1 })
						.css("borderColor", "#888");
    }  
  
  </script>
</head>
<body>
  <div id="wrapper">
    <div id="content">
      <div id="wrap">
        <div id="slide">         
          <img id="loading" src="jQuery/jqueryAutoSlideshow/images/loading.gif" alt="" />
          <a id="p1" href="#url"><img src='jQuery/jqueryAutoSlideshow/images/1.jpg' alt='' /></a> 
          <a id="p2" href="#url"><img src='jQuery/jqueryAutoSlideshow/images/2.jpg' alt='' /></a> 
          <a id="p3" href="#url"><img src='jQuery/jqueryAutoSlideshow/images/3.jpg' alt='' /></a> 
          <a id="p4" href="#url"><img src='jQuery/jqueryAutoSlideshow/images/1.jpg' alt='' /></a> 
          <a id="p5" href="#url"><img src='jQuery/jqueryAutoSlideshow/images/2.jpg' alt='' /></a> 
          <a id="p6" href="#url"><img src='jQuery/jqueryAutoSlideshow/images/3.jpg' alt='' /></a> 
          <a id="p7" href="#url"><img src='jQuery/jqueryAutoSlideshow/images/1.jpg' alt='' /></a>
        </div>
     
        <div id="previous">
          <b>Previous</b></div>
        <div id="next">
          <b>Next</b></div>
        <div id="buttons">
          <div id="b1"><img src='jQuery/jqueryAutoSlideshow/images/1t.jpg' alt='' /></div>
          <div id="b2"><img src='jQuery/jqueryAutoSlideshow/images/2t.jpg' alt='' /></div>
          <div id="b3"><img src='jQuery/jqueryAutoSlideshow/images/3t.jpg' alt='' /></div>
          <div id="b4"><img src='jQuery/jqueryAutoSlideshow/images/1t.jpg' alt='' /></div>
          <div id="b5"><img src='jQuery/jqueryAutoSlideshow/images/2t.jpg' alt='' /></div>
          <div id="b6"><img src='jQuery/jqueryAutoSlideshow/images/3t.jpg' alt='' /></div>
          <div id="b7"><img src='jQuery/jqueryAutoSlideshow/images/1t.jpg' alt='' /></div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

コメント・提案の投稿！

名前
メール
件名
本文

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

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

jQueryを利用したオートスライドショー

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

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

jQueryを利用したオートスライドショー

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

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