画像を自動でスクロールさせてーーとのことで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>
以上。
設定できるオプションはたくさんあるので、オートでスライドショーにしたり、スライドボタンをつけたりしてサイトに合わせて使い分け。