リプタクのもう覚えられません
Google
Web サイト内
topmemo ▶ スライドショーサンプル

JavaScript

スライドショーサンプル

JavaScriptを使用したスライドショーサンプル。

サンプルを見る
サンプルをダウンロード(zip)

【仕様】
表示画像URL,表示間隔,背景色はHTMLファイルで指定
画像の拡大縮小無し
停止・次画像・前画像表示機能
表示枚数・画像URL表示機能

【使用方法】
ダウンロードしたファイルの「ripshow」フォルダをHTMLファイルと同じ階層に設置。
HTMLファイルのhead内に外部スタイルシートと外部javascriptファイルをリンクさせ、 画像URLを記述(下記サンプルソース参照)。
HTMLファイルのbody内にスライドショー用コードを記述(下記サンプルソース参照)。


【HTML head内】



<link href="ripshow/ripshow.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
// <![CDATA[
var stopTime = 3; //表示時間(秒)
var haikeiColor = "#ffffff"; //背景色
//↓画像URL(絶対or相対パス)※上から表示
var imgURL = [
"http://xxx.jpg",
"http://xxx.jpg",
"http://xxx.jpg",
"http://xxx.jpg",
"http://xxx.jpg",
"img/sample1.jpg",
"img/sample2.jpg",
"img/sample3.jpg",
"img/sample4.jpg",
];
// ]]>
</script>
<script type="text/javascript" src="ripshow/ripshow.js"></script>










【HTML body内】




<!--ripshow start※zindex 8,9,10,20-->
<div id="picAddress"></div>
<div id="myText"></div>
<div id="prebt"><a href="JavaScript:picPre()"><span><<</span></a></div>
<div id="stopbt"><a href="JavaScript:picStop()"><span>||</span></a></div>
<div id="playbt"><a href="JavaScript:picStart()"><span>></span></a></div>
<div id="nextbt"><a href="JavaScript:picNext()"><span>>></span></a></div>
<div id="up"></div>
<div id="low"></div>
<!--ripshow end-->








last update 2010.12.9
参考・出典等
「特に無し」

▲page top

topmemogalleryblogtestaboutlinksmail
Copylight(C)2008-2010 Riptac. All Rights Reserved.