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

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

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

このサンプルは、jQueryのapiを利用してフォトを説明付きでスライドします。フォトをスライドするには、左右の矢印ボタンをクリックします。下の番号をクリックして移動することもできます。

フォトをスライドさせるには、左右のボタンにjQueryのclick時のイベントを登録して実装しています。フォトをスライドさせるときは、jQueryのanimate()apiを利用してアニメーション化しています。

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 Info-Slide</title>
  <link href="jQuery/infoSlide/info-slide.css" rel="stylesheet" type="text/css" />
  <script src="jQuery/jquery-1.3.2.js" type="text/javascript"></script>
  <script src="jQuery/infoSlide/info-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/infoSlide/loading.gif" alt="" />
          <div id="p1">
            <img src='jQuery/infoSlide/pic1.jpg' alt='' />
            <h1>Image #1</h1>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam viverra libero
              nec diam. Nam convallis viverra massa. Pellentesque blandit condimentum orci. Quisque
              sem nisi, iaculis in, lacinia ultricies, scelerisque non, lacus. Proin dolor nisi,
              consectetur a, faucibus id, egestas semper, libero. Sed dui. Sed porta tincidunt
              dui. Duis lacus elit, ultrices in, euismod a, ultrices id, eros. Suspendisse mattis
              libero quis arcu. Aliquam imperdiet dignissim dui. In leo. Maecenas suscipit eros
              vel diam. Suspendisse potenti. Maecenas tellus. Pellentesque sapien nibh, lobortis
              non, sollicitudin sit amet, imperdiet vehicula, orci. Mauris tellus diam, vulputate
              vel, sodales eget, rutrum at, dolor.</p>
            <a href="#url">more information...</a>
          </div>
          <div id="p2">
            <img src='jQuery/infoSlide/pic2.jpg' alt='' />
            <h1>Image #2</h1>
            <p>
              ク付け シビリティ テキストマ 寛会, のため をリンクテキス ウェブコンテン インタラクション 
              よる をマ ンツア シン可な ティのい びつける, わった んア ウェブア ルにするために, 
              トワク マルチメ オブジェク インタラクション エム をマ の再形式化 ンタネット協会 
              リティガイドライン のため, ユザエ 功久 ウェブコ シビリティ ウェブコンテン 寛会 
              ベルの仕と信 ンタネット協会 併団イ, バジョン セシビリ クリック」 アク ラベラ 
              ンツアクセシ リティにする ベルの仕と信 拡張可 エム, 展久 ルのアク さぁはじ 
              を始めてみよう アクセ, ツアク んア マルチメ サイトをアクセシブ
              </p>
            <a href="#url">more information...</a>
          </div>
          <div id="p3">
            <img src='jQuery/infoSlide/pic3.jpg' alt='' />
            <h1>Image #3</h1>
            <p>
              徽? 以太原??代表 使用粤方言的人口大???数的 没有方言差?造成的?面交流障碍 上, 
              国? 打 大?称?普通? 直到上世?年代中期 在台湾和香港使用的位或?位?? 及 文言 
              台湾称?国? 中国古代的文学家花?了很大的精力来????的?音体系 ?粤?的人
              可以使用?字?写出篇在北京可以被理解的文章, 共有 ? 特?是形声字 有很多文化上的保守人
              士???体中文是不?的和 未来?字的?展 公元前世?到世? 大?也直客?存在?繁并用的?象其二 
              昨天 ?, 共有 及 江西南部
              </p>
            <a href="#url">more information...</a>
          </div>
          <div id="p4">
            <img src='jQuery/infoSlide/pic4.jpg' alt='' />
            <h1>Image #4</h1>
            <p>
              ???? ????? ?????? ????????????????? ?????? ???? ?????? ?????? ??????? ????? ?????? ??????? ??????????????? ????? ???? ???? ????? ?????? ??????? ?????????? ?????? ??????
               ?????????? ???? ????? ???? ?????? ????????? ?????????? ????? ????? ???? ?????? ?????? ???????? ???? ????? ??????? ????????? ??????????
                ????? ???? ?????? ??????? ???? ????? ?????? ??????? ????????
            </p>
            <a href="#url">more information...</a>
          </div>
          <div id="p5">
            <img src='jQuery/infoSlide/pic5.jpg' alt='' />
            <h1>Image #5</h1>
            <p>
              Sed arcu. Proin eleifend, arcu vitae adipiscing dignissim, metus nisi suscipit dui,
              sit amet laoreet nibh nibh vel nisl. Nunc dui libero, varius in, vulputate eget,
              euismod sit amet, mi. Proin tempus lacinia metus. Ut purus diam, luctus suscipit,
              sodales nec, tincidunt ac, lorem. Etiam rutrum libero. Etiam sit amet quam eget
              odio pretium ornare. Cum sociis natoque penatibus et magnis dis parturient montes,
              nascetur ridiculus mus. Aenean sit amet neque. Sed leo mi, fermentum eget, tempus
              ut, imperdiet quis, metus. Pellentesque vel risus eu orci dictum consectetur.</p>
            <a href="#url">more information...</a>
          </div>
          <div id="p6">
            <img src='jQuery/infoSlide/pic6.jpg' alt='' />
            <h1>Image #6</h1>
            <p>
              Maecenas lacinia elit. Pellentesque magna. Fusce ut ligula non ipsum tincidunt dapibus.
              Mauris dui nisi, iaculis id, malesuada et, ornare sit amet, sapien. Praesent quis
              quam non massa consectetur pretium. Suspendisse et enim. Aliquam scelerisque, massa
              at tincidunt rutrum, dui diam luctus neque, eget placerat risus metus blandit ipsum.
              Integer elementum aliquam magna. Etiam bibendum, sapien at molestie ultrices, leo
              dui porttitor est, non aliquet massa ipsum et dolor. Phasellus consectetur nisl
              in metus. In nec est sit amet lacus sagittis gravida. Maecenas vel diam quis elit
              interdum consectetur. Curabitur fermentum, velit at cursus dictum, dolor tellus
              elementum sapien, luctus facilisis quam dui eu felis.</p>
            <a href="#url">more information...</a>
          </div>
          <div id="p7">
            <img src='jQuery/infoSlide/pic7.jpg' alt='' />
            <h1>Image #7</h1>
            <p>
              Aenean congue dolor ac orci. Donec ullamcorper nulla et leo. Vestibulum risus augue,
              vulputate ac, pellentesque ac, viverra in, orci. Aliquam erat volutpat. Mauris rutrum
              lacinia nisi. Curabitur pellentesque. Curabitur id ante. Duis suscipit, orci id
              tincidunt sollicitudin, risus nibh blandit dolor, vel tempus enim leo ut ipsum.
              Phasellus posuere. Ut nunc mi, molestie quis, sodales nec, condimentum quis, dolor.
              Sed a urna nec lorem sagittis bibendum. Sed congue velit in diam. In hac habitasse
              platea dictumst. Donec ut augue id massa dapibus eleifend. Nullam pretium orci quis
              risus. Donec fermentum dignissim nunc.</p>
            <a href="#url">more information...</a>
          </div>
          <div id="p8">
            <img src='jQuery/infoSlide/pic8.jpg' alt='' />
            <h1>Image #8</h1>
            <p>
              Vivamus sed risus eu urna accumsan varius. In augue. Mauris in orci a mauris sodales
              semper. In hac habitasse platea dictumst. Vivamus mauris. Pellentesque ipsum neque,
              condimentum sit amet, faucibus vitae, iaculis et, dolor. Aliquam erat. Nunc adipiscing
              dolor eget eros. Nunc in lectus. Pellentesque magna quam, molestie non, facilisis
              nec, condimentum in, turpis. Etiam molestie ante non nulla iaculis dapibus. Cras
              non arcu.</p>
            <a href="#url">more information...</a>
          </div>
          <div id="p9">
            <img src='jQuery/infoSlide/pic9.jpg' alt='' />
            <h1>Image #9</h1>
            <p>
              Sed hendrerit, massa malesuada molestie consectetur, tortor lacus mollis odio, gravida
              laoreet risus quam in nulla. Duis nulla ante, vehicula eget, dapibus vitae, mollis
              vitae, sapien. Maecenas placerat egestas lorem. Donec tincidunt mollis lorem. Proin
              auctor lobortis mi. Nullam vestibulum dui. Aenean suscipit neque sit amet nunc.
              Nam ut odio. Nullam pulvinar tristique enim. Curabitur at lectus eget lorem semper
              aliquam. Curabitur sodales. Duis nec ligula. Proin rhoncus lacinia erat. Nulla vel
              lectus ut lacus volutpat consectetur. Suspendisse interdum dapibus mauris. Praesent
              at nisl. Etiam elementum luctus nulla.</p>
            <a href="#url">more information...</a>
          </div>
          <div id="p10">
            <img src='jQuery/infoSlide/pic10.jpg' alt='' />
            <h1>Image #10</h1>
            <p>
              Nulla facilisi. Ut in sem ac ante sodales porta. Donec nec sapien. Pellentesque
              molestie enim ac nibh. Nulla facilisi. Donec feugiat condimentum elit. Donec eget
              sem sed diam mollis hendrerit. Cras pellentesque libero a augue. Maecenas a tellus.
              Donec dictum.
            </p>
            <a href="#url">more information...</a>
          </div>
        </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 = 580;

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


  $("#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: 680px;
  height: 390px;
  background: #8bd;
  border: 5px solid #adf;
  position: relative;
  margin: 30px auto 20px auto;
}
#slide
{
  width: 580px;
  height: 310px;
  overflow: hidden;
  position: absolute;
  left: 49px;
  top: 29px;
  background: #fff;
  border: 1px solid #698639;
  border-color: #479 #adf #adf #479;
}
#slide div
{
  width: 540px;
  height: 270px;
  position: absolute;
  left: 580px;
  padding: 20px;
}
#slide div img
{
  display: block;
  border: 1px solid #8bd;
  float: left;
  margin-right: 20px;
}
#slide div h1
{
  color: #888;
  font-size: 20px;
  font-family: "lucida sans" , sans-serif;
  font-style: italic;
}
#slide div p
{
  font-family: "lucida sans" , sans-serif;
  color: #444;
  line-height: 1.5em;
  font-size: 11px;
}
#slide div a
{
  font-family: "lucida sans" , sans-serif;
  color: #00d;
  line-height: 1.5em;
  font-size: 11px;
  position: absolute;
  right: 20px;
  bottom: 10px;
  text-decoration: none;
}
#slide div a:hover
{
  text-decoration: underline;
}

#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: 150px;
  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: 610px;
  top: 150px;
  cursor: pointer;
}
* html #next
{
  background: none;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='right.png', sizingMethod='crop');
}
#buttons
{
  position: absolute;
  left: 50px;
  top: 355px;
}
#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: 290px;
  top: 170px;
}

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

            
<link href="jQuery/infoSlide/info-slide.css" rel="stylesheet" type="text/css" />
<script src="jQuery/jquery-1.3.2.js" type="text/javascript"></script>
<script src="jQuery/infoSlide/info-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/infoSlide/loading.gif" alt="" />
        <div id="p1">
          <img src='jQuery/infoSlide/pic1.jpg' alt='' />
          <h1>Image #1</h1>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam viverra libero
            nec diam. Nam convallis viverra massa. Pellentesque blandit condimentum orci. Quisque
            sem nisi, iaculis in, lacinia ultricies, scelerisque non, lacus. Proin dolor nisi,
            consectetur a, faucibus id, egestas semper, libero. Sed dui. Sed porta tincidunt
            dui. Duis lacus elit, ultrices in, euismod a, ultrices id, eros. Suspendisse mattis
            libero quis arcu. Aliquam imperdiet dignissim dui. In leo. Maecenas suscipit eros
            vel diam. Suspendisse potenti. Maecenas tellus. Pellentesque sapien nibh, lobortis
            non, sollicitudin sit amet, imperdiet vehicula, orci. Mauris tellus diam, vulputate
            vel, sodales eget, rutrum at, dolor.</p>
          <a href="#url">more information...</a>
        </div>
        <div id="p2">
          <img src='jQuery/infoSlide/pic2.jpg' alt='' />
          <h1>Image #2</h1>
          <p>
            ク付け シビリティ テキストマ 寛会, のため をリンクテキス ウェブコンテン インタラクション 
            よる をマ ンツア シン可な ティのい びつける, わった んア ウェブア ルにするために, 
            トワク マルチメ オブジェク インタラクション エム をマ の再形式化 ンタネット協会 
            リティガイドライン のため, ユザエ 功久 ウェブコ シビリティ ウェブコンテン 寛会 
            ベルの仕と信 ンタネット協会 併団イ, バジョン セシビリ クリック」 アク ラベラ 
            ンツアクセシ リティにする ベルの仕と信 拡張可 エム, 展久 ルのアク さぁはじ 
            を始めてみよう アクセ, ツアク んア マルチメ サイトをアクセシブ
            </p>
          <a href="#url">more information...</a>
        </div>
        <div id="p3">
          <img src='jQuery/infoSlide/pic3.jpg' alt='' />
          <h1>Image #3</h1>
          <p>
            徽? 以太原??代表 使用粤方言的人口大???数的 没有方言差?造成的?面交流障碍 上, 
            国? 打 大?称?普通? 直到上世?年代中期 在台湾和香港使用的位或?位?? 及 文言 
            台湾称?国? 中国古代的文学家花?了很大的精力来????的?音体系 ?粤?的人
            可以使用?字?写出篇在北京可以被理解的文章, 共有 ? 特?是形声字 有很多文化上的保守人
            士???体中文是不?的和 未来?字的?展 公元前世?到世? 大?也直客?存在?繁并用的?象其二 
            昨天 ?, 共有 及 江西南部
            </p>
          <a href="#url">more information...</a>
        </div>
        <div id="p4">
          <img src='jQuery/infoSlide/pic4.jpg' alt='' />
          <h1>Image #4</h1>
          <p>
            ???? ????? ?????? ????????????????? ?????? ???? ?????? ?????? ??????? ????? ?????? ??????? ??????????????? ????? ???? ???? ????? ?????? ??????? ?????????? ?????? ??????
             ?????????? ???? ????? ???? ?????? ????????? ?????????? ????? ????? ???? ?????? ?????? ???????? ???? ????? ??????? ????????? ??????????
              ????? ???? ?????? ??????? ???? ????? ?????? ??????? ????????
          </p>
          <a href="#url">more information...</a>
        </div>
        <div id="p5">
          <img src='jQuery/infoSlide/pic5.jpg' alt='' />
          <h1>Image #5</h1>
          <p>
            Sed arcu. Proin eleifend, arcu vitae adipiscing dignissim, metus nisi suscipit dui,
            sit amet laoreet nibh nibh vel nisl. Nunc dui libero, varius in, vulputate eget,
            euismod sit amet, mi. Proin tempus lacinia metus. Ut purus diam, luctus suscipit,
            sodales nec, tincidunt ac, lorem. Etiam rutrum libero. Etiam sit amet quam eget
            odio pretium ornare. Cum sociis natoque penatibus et magnis dis parturient montes,
            nascetur ridiculus mus. Aenean sit amet neque. Sed leo mi, fermentum eget, tempus
            ut, imperdiet quis, metus. Pellentesque vel risus eu orci dictum consectetur.</p>
          <a href="#url">more information...</a>
        </div>
        <div id="p6">
          <img src='jQuery/infoSlide/pic6.jpg' alt='' />
          <h1>Image #6</h1>
          <p>
            Maecenas lacinia elit. Pellentesque magna. Fusce ut ligula non ipsum tincidunt dapibus.
            Mauris dui nisi, iaculis id, malesuada et, ornare sit amet, sapien. Praesent quis
            quam non massa consectetur pretium. Suspendisse et enim. Aliquam scelerisque, massa
            at tincidunt rutrum, dui diam luctus neque, eget placerat risus metus blandit ipsum.
            Integer elementum aliquam magna. Etiam bibendum, sapien at molestie ultrices, leo
            dui porttitor est, non aliquet massa ipsum et dolor. Phasellus consectetur nisl
            in metus. In nec est sit amet lacus sagittis gravida. Maecenas vel diam quis elit
            interdum consectetur. Curabitur fermentum, velit at cursus dictum, dolor tellus
            elementum sapien, luctus facilisis quam dui eu felis.</p>
          <a href="#url">more information...</a>
        </div>
        <div id="p7">
          <img src='jQuery/infoSlide/pic7.jpg' alt='' />
          <h1>Image #7</h1>
          <p>
            Aenean congue dolor ac orci. Donec ullamcorper nulla et leo. Vestibulum risus augue,
            vulputate ac, pellentesque ac, viverra in, orci. Aliquam erat volutpat. Mauris rutrum
            lacinia nisi. Curabitur pellentesque. Curabitur id ante. Duis suscipit, orci id
            tincidunt sollicitudin, risus nibh blandit dolor, vel tempus enim leo ut ipsum.
            Phasellus posuere. Ut nunc mi, molestie quis, sodales nec, condimentum quis, dolor.
            Sed a urna nec lorem sagittis bibendum. Sed congue velit in diam. In hac habitasse
            platea dictumst. Donec ut augue id massa dapibus eleifend. Nullam pretium orci quis
            risus. Donec fermentum dignissim nunc.</p>
          <a href="#url">more information...</a>
        </div>
        <div id="p8">
          <img src='jQuery/infoSlide/pic8.jpg' alt='' />
          <h1>Image #8</h1>
          <p>
            Vivamus sed risus eu urna accumsan varius. In augue. Mauris in orci a mauris sodales
            semper. In hac habitasse platea dictumst. Vivamus mauris. Pellentesque ipsum neque,
            condimentum sit amet, faucibus vitae, iaculis et, dolor. Aliquam erat. Nunc adipiscing
            dolor eget eros. Nunc in lectus. Pellentesque magna quam, molestie non, facilisis
            nec, condimentum in, turpis. Etiam molestie ante non nulla iaculis dapibus. Cras
            non arcu.</p>
          <a href="#url">more information...</a>
        </div>
        <div id="p9">
          <img src='jQuery/infoSlide/pic9.jpg' alt='' />
          <h1>Image #9</h1>
          <p>
            Sed hendrerit, massa malesuada molestie consectetur, tortor lacus mollis odio, gravida
            laoreet risus quam in nulla. Duis nulla ante, vehicula eget, dapibus vitae, mollis
            vitae, sapien. Maecenas placerat egestas lorem. Donec tincidunt mollis lorem. Proin
            auctor lobortis mi. Nullam vestibulum dui. Aenean suscipit neque sit amet nunc.
            Nam ut odio. Nullam pulvinar tristique enim. Curabitur at lectus eget lorem semper
            aliquam. Curabitur sodales. Duis nec ligula. Proin rhoncus lacinia erat. Nulla vel
            lectus ut lacus volutpat consectetur. Suspendisse interdum dapibus mauris. Praesent
            at nisl. Etiam elementum luctus nulla.</p>
          <a href="#url">more information...</a>
        </div>
        <div id="p10">
          <img src='jQuery/infoSlide/pic10.jpg' alt='' />
          <h1>Image #10</h1>
          <p>
            Nulla facilisi. Ut in sem ac ante sodales porta. Donec nec sapien. Pellentesque
            molestie enim ac nibh. Nulla facilisi. Donec feugiat condimentum elit. Donec eget
            sem sed diam mollis hendrerit. Cras pellentesque libero a augue. Maecenas a tellus.
            Donec dictum.
          </p>
          <a href="#url">more information...</a>
        </div>
      </div>
      <!-- end wrap -->
      <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>
      <!-- end buttons -->
    </div>
    <!-- end wrap -->
  </div>
  <!-- end of content -->
</div>

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