テロップ流しのような画像スライド/画像表示/SolidStateEveryday - Ajax,javascript,UIサンプルとチュートリアル -

SAMPLE
CODE
DownLoad

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<link rel="stylesheet" type="text/css" href="imageScroller.css">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>imageScroller Image Carousel</title>
	<script type="text/javascript" src="jquery-1.3.1.min.js"></script>
    <script type="text/javascript" src="imageScroller.js"></script>
</head>
<body>
<div id="outerContainer">
	<div id="imageScroller">
	    <div id="viewer" class="js-disabled">
			<a class="wrapper" href="http://mozilla.jp/firefox/" title="Firefox" target="_blank"><img  src="logos/Firefox.jpg" alt="Firefox"></a>
			<a class="wrapper" href="http://www.google.com/chrome/intl/ja/landing.html?hl=ja" title="chrome" target="_blank"><img class="logo" id="jquery" src="logos/chrome.jpg" alt="chrome"></a>
			<a class="wrapper" href="http://www.apple.com/jp/safari/" title="safari" target="_blank"><img class="logo" id="twitter" src="logos/safari.jpg" alt="safari"></a>
			<a class="wrapper" href="http://www.microsoft.com/japan/windows/products/winfamily/ie/default.mspx" title="ie" target="_blank"><img class="logo" id="twitter" src="logos/ie.jpg" alt="ie"></a>
			<a class="wrapper" href="http://jp.opera.com/" title="opera" target="_blank"><img class="logo" id="jqueryui" src="logos/opera.jpg" alt="opera"></a>
			<a class="wrapper" href="http://www.ioage.com/hl/jpn/download_list21.htm" title="World" target="_blank"><img class="logo" id="jqueryui" src="logos/World.jpg" alt="World"></a>
	    </div>
    </div>
</div>

</body>
</html>

	Building a jQuery Image Scroller - Nettuts+

テロップが流れるような、ニュース速報のようにスライドします。
繰り返しスライドしたり、タイトル、リンクも設置できるようです。
設定を変えれば、テキスト含みのコンテンツも流せそうです。

セッティング

１．ダウンロード/セッティング

サイトへ行き、スクリプトの圧縮ファイルをダウンロードします。
次にjQueryをダウンロードします。
圧縮ファイルを解凍したら、imageScroller.htmlを開き、

$(function() {
//remove js-disabled class

$("#viewer").removeClass("js-disabled");

～～～

animator($("div#container"), newDuration, "rtl");
});
});　

この部分をコピーして、新しくimageScroller.jsとでも名づけて保存します。
そして、jquery-1.3.1.min.js、imageScroller.js、imageScroller.css、imagesフォルダをアップします。
CSSは既存のものに上書きした方が良いかもしれません。
imagesフォルダ内にある画像は、背景の枠などのパーツなので、使用する場合はアップロードしてください。