JavaScript + Ajax 実践サンプル集 - jQueryでフォトスライドを表示する

jQueryでフォトスライドを表示する

説明補足説明コード分割コードその他関連書籍コメント投稿

このサンプルは、jQueryのapiを利用してフォトスライドを表示します。フォトをスライドするには、左右の移動ボタンをクリックします。また、下端の番号をクリックすると直接目的のフォトを表示することができます。

左右の移動ボタンには、jQueryのclick時のイベントハンドラを登録しています。click時のイベントハンドラでは、animateLeft(),animateRight()関数を呼び出してイメージを左右にスクロールします。

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

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

function animateLeft(current, button) {
    $('#p' + current).css("left", width + "px");
    $('#p' + current).animate({ "left": "0px" }, 400, "swing");
    $('#p' + button).animate({ "left": -width + "px" }, 400, "swing");
    setbutton()
}

function animateRight(current, button) {
    $('#p' + current).css("left", -width + "px");
    $('#p' + current).animate({ "left": "0px" }, 400, "swing");
    $('#p' + button).animate({ "left": width + "px" }, 400, "swing");
    setbutton()
}

function setbutton() {
    $('#b' + button).css("backgroundPosition", "left top")
    $('#b' + button + ' b').css("color", "#16a");
    $('#b' + current).css("backgroundPosition", "left bottom")
    $('#b' + current + ' b').css("color", "#fff");
}

<!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 Photo-Slide</title>
  <link href="jQuery/photoSlide/photo-slide.css" rel="stylesheet" type="text/css" />
  <script src="jQuery/jquery-1.3.2.js" type="text/javascript"></script>
  <script src="jQuery/photoSlide/photo-slide.js" type="text/javascript"></script>
</head>
<body>
  <div id="wrapper">
    <div id="content">
      <div id="wrap">
        <div id="slide">
          <img id="loading" src="jQuery/photoSlide/loading.gif" alt="" />
          <a id="p1" href="#url">
            <img src='jQuery/photoSlide/pic1.jpg' alt='' /></a> 
          <a id="p2" href="#url">
            <img src='jQuery/photoSlide/pic2.jpg' alt='' /></a> 
          <a id="p3" href="#url">
            <img src='jQuery/photoSlide/pic3.jpg' alt='' /></a> 
          <a id="p4" href="#url">
            <img src='jQuery/photoSlide/pic4.jpg' alt='' /></a> 
          <a id="p5" href="#url">
            <img src='jQuery/photoSlide/pic5.jpg' alt='' /></a> 
          <a id="p6" href="#url">
            <img src='jQuery/photoSlide/pic6.jpg' alt='' /></a> 
          <a id="p7" href="#url">
            <img src='jQuery/photoSlide/pic7.jpg' alt='' /></a> 
          <a id="p8" href="#url">
            <img src='jQuery/photoSlide/pic8.jpg' alt='' /></a> 
          <a id="p9" href="#url">
            <img src='jQuery/photoSlide/pic9.jpg' alt='' /></a> 
          <a id="p10" href="#url">
            <img src='jQuery/photoSlide/pic10.jpg' alt='' /></a>
        </div>       
        <div id="title"></div>
        <div id="previous">
          <b>Previous</b>
        </div>
        <div id="next">
          <b>Next</b>
        </div>        
        <div id="buttons">
          <div id="b1"><b>1</b></div>
          <div id="b2"><b>2</b></div>
          <div id="b3"><b>3</b></div>
          <div id="b4"><b>4</b></div>
          <div id="b5"><b>5</b></div>
          <div id="b6"><b>6</b></div>
          <div id="b7"><b>7</b></div>
          <div id="b8"><b>8</b></div>
          <div id="b9"><b>9</b></div>
          <div id="b10"><b>10</b></div>
        </div>      
      </div>        
    </div>     
  </div>      
  
</body>
</html>

外部スクリプトCSS部HEAD部BODY部その他

ボックス内のコードを外部ファイル(*.js)、またはHTMLドキュメントの<HEAD>セクションの<script>タグ内にコピー＆ペーストしてください。

            
/* ================================================================ 
This copyright notice must be untouched at all times.
Copyright (c) 2009 Stu Nicholls - stunicholls.com - all rights reserved.
=================================================================== */

$(document).ready(function() {
  current = 1;
  button = 1;
  images = 10;
  width = 480;

  $('#p1').animate({ "left": "0px" }, 400, "swing");
  $('#b1').css("backgroundPosition", "left bottom")
  $('#b1 b').css("color", "#fff");

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

  $("#previous").click(function() {
    button = current;
    current--
    if (current == 0) { current = images }
    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) }
  });

  $("#buttons div b").mouseover(function() {
    if (($(this).css("color")) == "#16a" || ($(this).css("color")) == "rgb(17, 102, 170)") { $(this).css("color", "#000"); }
  });

  $("#buttons div b").mouseout(function() {
    if (($(this).css("color")) == "#000" || ($(this).css("color")) == "rgb(0, 0, 0)") { $(this).css("color", "#16a"); }
  });

  function animateLeft(current, button) {
    $('#p' + current).css("left", width + "px");
    $('#p' + current).animate({ "left": "0px" }, 400, "swing");
    $('#p' + button).animate({ "left": -width + "px" }, 400, "swing");
    setbutton()
  }

  function animateRight(current, button) {
    $('#p' + current).css("left", -width + "px");
    $('#p' + current).animate({ "left": "0px" }, 400, "swing");
    $('#p' + button).animate({ "left": width + "px" }, 400, "swing");
    setbutton()
  }

  function setbutton() {
    $('#b' + button).css("backgroundPosition", "left top")
    $('#b' + button + ' b').css("color", "#16a");
    $('#b' + current).css("backgroundPosition", "left bottom")
    $('#b' + current + ' b').css("color", "#fff");
  }

});

ボックス内のスタイルシート(CSS)を外部ファイル(*.css)、またはHTMLドキュメントの<HEAD>セクションの<style>タグ内にコピー＆ペーストしてください。

            
#wrap
{
  width: 580px;
  height: 440px;
  background: #c5d99f;
  border: 5px solid #e0ebcb;
  position: relative;
  margin: 30px auto 20px auto;
}
#slide
{
  width: 480px;
  height: 360px;
  overflow: hidden;
  position: absolute;
  left: 49px;
  top: 29px;
  background: #fff;
  border: 1px solid #698639;
  border-color: #698639 #e0ebcb #e0ebcb #698639;
}
#slide a
{
  text-decoration: none;
  display: block;
  width: 480px;
  height: 360px;
  position: absolute;
  left: 480px;
}
#slide a img
{
  display: block;
  border: 0;
}
#title
{
  width: 131px;
  height: 132px;
  /*
  background: url(star.png);
  */
  position: absolute;
  left: 5px;
  top: -30px;
}
* html #title
{
  background: none;
  /*
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='star.png', sizingMethod='crop');
  */
}
#previous b
{
  display: none;
}
#previous
{
  width: 74px;
  height: 74px;
  background: url(left.png);
  position: absolute;
  left: 5px;
  top: 175px;
  cursor: pointer;
}
* html #previous
{
  background: none;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='left.png', sizingMethod='crop');
}
#next b
{
  display: none;
}
#next
{
  width: 74px;
  height: 74px;
  background: url(right.png);
  position: absolute;
  left: 510px;
  top: 175px;
  cursor: pointer;
}
* html #next
{
  background: none;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='right.png', sizingMethod='crop');
}
#buttons
{
  position: absolute;
  left: 50px;
  top: 405px;
}
#buttons div
{
  width: 20px;
  height: 20px;
  background: url(button.gif);
  float: left;
  margin-right: 5px;
  display: inline;
}
#buttons div b
{
  display: block;
  width: 20px;
  height: 20px;
  line-height: 19px;
  font-family: arial, sans-serif;
  font-size: 11px;
  color: #16a;
  text-align: center;
  cursor: pointer;
}
img#loading
{
  position: absolute;
  left: 240px;
  top: 170px;
}

ボックス内のコードをHTMLドキュメントの<HEAD>セクションにコピー＆ペーストしてください。

            
<link href="jQuery/photoSlide/photo-slide.css" rel="stylesheet" type="text/css" />
<script src="jQuery/jquery-1.3.2.js" type="text/javascript"></script>
<script src="jQuery/photoSlide/photo-slide.js" type="text/javascript"></script>

ボックス内のコードをHTMLドキュメントの<BODY>セクションにコピー＆ペーストしてください。

            
<div id="wrapper">
  <div id="content">
    <div id="wrap">
      <div id="slide">
        <img id="loading" src="jQuery/photoSlide/loading.gif" alt="" />
        <a id="p1" href="#url">
          <img src='jQuery/photoSlide/pic1.jpg' alt='' /></a> 
        <a id="p2" href="#url">
          <img src='jQuery/photoSlide/pic2.jpg' alt='' /></a> 
        <a id="p3" href="#url">
          <img src='jQuery/photoSlide/pic3.jpg' alt='' /></a> 
        <a id="p4" href="#url">
          <img src='jQuery/photoSlide/pic4.jpg' alt='' /></a> 
        <a id="p5" href="#url">
          <img src='jQuery/photoSlide/pic5.jpg' alt='' /></a> 
        <a id="p6" href="#url">
          <img src='jQuery/photoSlide/pic6.jpg' alt='' /></a> 
        <a id="p7" href="#url">
          <img src='jQuery/photoSlide/pic7.jpg' alt='' /></a> 
        <a id="p8" href="#url">
          <img src='jQuery/photoSlide/pic8.jpg' alt='' /></a> 
        <a id="p9" href="#url">
          <img src='jQuery/photoSlide/pic9.jpg' alt='' /></a> 
        <a id="p10" href="#url">
          <img src='jQuery/photoSlide/pic10.jpg' alt='' /></a>
      </div> <!-- slide -->      
      <div id="title"></div>
      <div id="previous">
        <b>Previous</b>
      </div>
      <div id="next">
        <b>Next</b>
      </div>        
      <div id="buttons">
        <div id="b1"><b>1</b></div>
        <div id="b2"><b>2</b></div>
        <div id="b3"><b>3</b></div>
        <div id="b4"><b>4</b></div>
        <div id="b5"><b>5</b></div>
        <div id="b6"><b>6</b></div>
        <div id="b7"><b>7</b></div>
        <div id="b8"><b>8</b></div>
        <div id="b9"><b>9</b></div>
        <div id="b10"><b>10</b></div>
      </div>      
    </div>  <!--  wrap -->      
  </div>    <!-- content --> 
</div>      <!-- wrapper -->

サンプルで使用しているイメージです。イメージを右クリックしてダウンロードしてください。