<?php the_title(); ?>

jQueryでスライドショー

Category::Web・IT小技  Tags::  Comments/Trackbaks::(0)




画像を自動でスクロールさせてーーとのことで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>

以上。

設定できるオプションはたくさんあるので、オートでスライドショーにしたり、スライドボタンをつけたりしてサイトに合わせて使い分け。

コメントをどうぞ

CAPTCHA



Trackback URI