システム開発研究所YOUJIN > スクローラー

Javascript

バナーをタテやヨコに自動スクロールさせる! 
スクローラーJavascript 

右に表示させているのがこのスクローラーです!
こんな感じで、画像をずっとスクロール表示してくれるのが今回提供しているJavascriptです。

これは縦スクロールも横スクロールも、どちらもいけます。そして画像じゃなくても、テキストでも何でもスクロールさせることが出来ますので色んな用途に使えそうですね!

このサイトでも使ってます!

webデザイナー事務所

和風webデザイン

ペットショップ向けデザイン

FXのwebデザイン

病院のホームページ作成

会社のホームページ作成

学校のホームページ作成

HELP/設置方法その1

まずはJavascriptファイルを外部リンクさせてください。

(例)<script type=”text/javascript” src=”http://sample.com/js/scroller.js“></script>

HELP/設置方法その2

スクロールで流したい画像やテキストを、HTMLに記述してください。 

(例) 
<img src=”sample-1.jpg”>
<img src=”sample-2.jpg”>
<img src=”sample-3.jpg”>
<img src=”sample-4.jpg”>
<img src=”sample-5.jpg”> 

HELP/設置方法その3

それらを下記のようなDIVで囲んであげて下さい。
vscrollerと入れたら縦スクロール。hscrollerと入れたら横スクロールします。
あとはサイズは中身に合わせて自由に指定してください。DIVで囲んだ部分がスクロールします。

(例)

<div class=”vscroller” style=”width: 208px; height: 474px; margin: 0 auto;”>

<img src=”sample-1.jpg”>
<img src=”sample-2.jpg”>
<img src=”sample-3.jpg”>
<img src=”sample-4.jpg”>
<img src=”sample-5.jpg”>

</div>

DOWNLORD/ダウンロードはこちら

ダウンロードバナースクローラーJacascript

画像もテキストも、横スクロール、縦スクロールと、自動スクロールし続けてくれるJacascript。よくネットショップでバナーがスクロールしてループしている場面をみかけると思います。こういう効果は使いすぎるとユーザーの目が疲れてしまうので、その点には気をつけて調整すると良いでしょう。