JavaScript + Ajax 実践サンプル集

スライドショー

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

このサンプルは、jQueryのslideshow()プラグインを利用してスライドショーを表示します。サンプルが表示されると順番にスライドが表示されます。手動で切り替えるときは、左上の番号[1-4]をクリックします。スライド（イメージ上の）下の両サイドにマウスを移動すると矢印が表示されます。この矢印をクリックして手動で移動することもできます。

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

$.slideshow({
    container: 'slideShow1',
    loader: 'jQuery/slideshow/images/slideshow_loader.gif',
    linksPosition: 'top',
    linksClass: 'pagelinks',
    linksSeparator: ' | ',
    fadeDuration: 400,
    activeLinkClass: 'activeSlide',
    nextslideClass: 'nextSlide',
    prevslideClass: 'prevSlide',
    captionPosition: 'bottom',
    captionClass: 'slideCaption',
    autoplay: 4,
    random: false,
    images: [
      {
        src: 'jQuery/slideshow/images/panda/Dynamic.jpg',
        caption: 'Panda Dynamic'
      },
      {
        src: 'jQuery/slideshow/images/panda/Actual.jpg',
        caption: 'Panda Actual'
      },
      {
        src: 'jQuery/slideshow/images/panda/Panda.jpg',
        caption: 'Fiat Panda'
      },
      {
        src: 'jQuery/slideshow/images/panda/Active.jpg',
        caption: 'Panda Active'
      }
    ]
});

<!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 - Slider show </title>
  <link href="jQuery/slideshow/StyleSheet.css" rel="stylesheet" type="text/css" />
  <script src="jQuery/slideshow/jquery-1.1.2.js" type="text/javascript"></script>
  <script src="jQuery/slideshow/interface.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function() {

$.slideshow({
        container: 'slideShow1',
        loader: 'jQuery/slideshow/images/slideshow_loader.gif',
        linksPosition: 'top',
        linksClass: 'pagelinks',
        linksSeparator: ' | ',
        fadeDuration: 400,
        activeLinkClass: 'activeSlide',
        nextslideClass: 'nextSlide',
        prevslideClass: 'prevSlide',
        captionPosition: 'bottom',
        captionClass: 'slideCaption',
        autoplay: 4,
        random: false,
        images: [
					{
					  src: 'jQuery/slideshow/images/panda/Dynamic.jpg',
					  caption: 'Panda Dynamic'
					},
					{
					  src: 'jQuery/slideshow/images/panda/Actual.jpg',
					  caption: 'Panda Actual'
					},
					{
					  src: 'jQuery/slideshow/images/panda/Panda.jpg',
					  caption: 'Fiat Panda'
					},
					{
					  src: 'jQuery/slideshow/images/panda/Active.jpg',
					  caption: 'Panda Active'
					}
				]
      });

$('a').ToolTip(	{
			  className: 'inputsTooltip',
			  position: 'mouse'
			});

});
  </script>

</head>
<body>

</body>
</html>

CSS部HEAD部BODY部

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

            
body
{
	font-family:Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #666666;
}
a
{
	text-decoration: none;
}
#slideShow1
{
	width: 300px;
	height: 300px;
	border: 1px solid #ccc;
	padding: 10px;
	background-color: #fff;
	margin: 10px;
}
#slideShow2
{
	width: 300px;
	height: 300px;
	border: 1px solid #ccc;
	padding: 10px;
	background-color: #fff;
	margin: 10px;
}
.pagelinks a
{
	font-weight: bold;
	color: #666;
}
.slideCaption
{
	background-color: #FFFFCC;
	padding: 4px;
	text-align: center;
	font-weight: bold;
}
.pagelinks a.activeSlide
{
	color: #f90;
}
/* this is for IE so the prev/next links can be hovered*/
.nextSlide,.prevSlide
{
	background-image: url(images/spacer.gif);
}
.nextSlide:hover
{
	background-image: url(images/nextslide.jpg);
	background-repeat: no-repeat;
	background-position: right bottom;
}
.prevSlide:hover
{
	background-image: url(images/prevslide.jpg);
	background-repeat: no-repeat;
	background-position: left bottom;
}
.inputsTooltip
{
	border: 1px solid #ccc;
	background-color: #eee;
	padding: 4px;
	color: #333;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	filter:alpha(opacity=70);
	-moz-opacity:.70;
	opacity:.70;
}
#tooltipURL
{
	display: none;
}

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

            
  <link href="jQuery/slideshow/StyleSheet.css" rel="stylesheet" type="text/css" />
  <script src="jQuery/slideshow/jquery-1.1.2.js" type="text/javascript"></script>
  <script src="jQuery/slideshow/interface.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function() {

      $.slideshow({
        container: 'slideShow1',
        loader: 'jQuery/slideshow/images/slideshow_loader.gif',
        linksPosition: 'top',
        linksClass: 'pagelinks',
        linksSeparator: ' | ',
        fadeDuration: 400,
        activeLinkClass: 'activeSlide',
        nextslideClass: 'nextSlide',
        prevslideClass: 'prevSlide',
        captionPosition: 'bottom',
        captionClass: 'slideCaption',
        autoplay: 4,
        random: false,
        images: [
					{
					  src: 'jQuery/slideshow/images/panda/Dynamic.jpg',
					  caption: 'Panda Dynamic'
					},
					{
					  src: 'jQuery/slideshow/images/panda/Actual.jpg',
					  caption: 'Panda Actual'
					},
					{
					  src: 'jQuery/slideshow/images/panda/Panda.jpg',
					  caption: 'Fiat Panda'
					},
					{
					  src: 'jQuery/slideshow/images/panda/Active.jpg',
					  caption: 'Panda Active'
					}
				]
      });

      $('a').ToolTip(	{
			  className: 'inputsTooltip',
			  position: 'mouse'
			});


    });
  </script>

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

            
  <div id="slideShow1">

  </div>

コメント・提案の投稿！

名前
メール
件名
本文

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

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

スライドショー

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

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

スライドショー

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

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