画像を自動でスクロールさせてーーとのことでjQueryを使用。
基本だけどよく使いそうなのでちょっとメモ。
【1】http://jquery.com/ で jquery.js を入手。
トップ→Download→CONTENTSより最新の jquery.js をDL
【2】http://www.gmarwaha.com// より jcarousellite.js を入手。
トップ→Some of my ProjectsのJCarousel Lite →Downloadより最新の jcarousellite.js をDL
【3】ヘッダにjs挿入
<script type="text/javascript" src="jquery.jsのURL"></script>
<script type="text/javascript" src="jcarousellite.jsのURL"></script>
<script type="text/javascript">
<!--
$(document).ready(function($){
$("#ScroolImg").jCarouselLite({ // #ScroolImgには下記で指定する任意のidを指定
auto:7000, //オートスクロールありで、次の画像までの時間(1000で1秒)
speed:1000, //スクロールのスピード(1000で1秒)
scroll:1, //何枚ずつ移動するか
visible:1 //何枚表示するか
//などのオプションを指定
});
});
//-->
</script>
【4】body以下の画像を表示させたい場所にスクロールさせたい画像URLを記載
<div id="ScroolImg"> // 上で指定した任意のid
<ul>
<li><img src="photo1.jpg" alt="" width="" height="" >テキストもスライドします。</li>
<li><img src="photo2.jpg" alt="" width="" height="" >リンクを張ったりもできます。</li>
<li><img src="photo3.jpg" alt="" width="" height="" ></li>
<li><img src="photo4.jpg" alt="" width="" height="" ></li>
</ul>
</div>
以上。
設定できるオプションはたくさんあるので、オートでスライドショーにしたり、スライドボタンをつけたりしてサイトに合わせて使い分け。



