・スライダー
jQueryでスライダーを作成しました。ホームページとサンプルを兼ねて、交通情報のスライダーを載せてみました。部品として作成してありますので、iframeでパラメータを指定すればどのホームページにも貼り付けることができます。
jQueryのスライダーは、プラグインはいくつかあるようですが、自作の方が応用がきくので作ることにしました。フェードイン・フェードアウトとは違って、横に流れるテロップ用です。ブロック毎にできますから、写真と文字のセットで動かすこともできます。

スライダーはjQueryのanimate（アニメーション）コマンドを使用します。
jQueryの主なスクリプト。

//jQueryの初期化
$(function() {
　　syoki_s();		
});
//スライダー関数
function slide_s(){
　　slideX = -sllen;
　　$("#myslide p").not(":animated").animate({left:slideX}　
　　,　"slow",　"linear",　slidecall_s);
}
//コールバック関数
function slidecall_s() {
　//後処理（文字、画像セット、タイマー等）　
  syori_s();
}
//文字列長さ取得
function gettxtlen_s(txt){
  var obj = document.getElementById("txt")
  obj.innerHTML = txt;
  return obj.offsetWidth;
}

・animate()はjQueryの組み込み関数（アニメーション）です。ここでは単純にslen分だけ左へ移動させています。slowに数字（秒数×1000）を入れると移動時間（速度）になります。今回のように移動距離が毎回異なる場合は計算が必要です。
・コールバック関数はアニメーションが終了した時に呼び出されます。ここに次の処理を書くと、アニメーションが重ならずに順次処理できます。コールバック関数はなくても動きます。
・今回のように異なる文字列を移動するには、各文字列の長さを取得する必要があります。ここでは、javascriptのoffsetWidthで取得しています。jQueryのwidthでも取得できますが、innerHTML等を理解していないと思わぬ結果になるので、注意が必要です。幅が固定のブロック要素や画像をスライドする場合はその必要はありません。

 共有元ページ