crawler:テキストや画像を水平に自動スライドするJs



テキストや画像を水平方向に自動スライドしてみます。
過去に
SMOOTHDIVSCROLL:複数のサムネイル画像を左右に自動スライドさせるJQUERY
をご紹介しましたが、似たようなJsです。

1.JavaScriptの記述例

<script type="text/javascript" src="crawler.js"></script>
<script type="text/javascript">
//テキスト(#idTxtslide)のスライド設定
marqueeInit({
	uniqueid: 'idTxtslide',
	style: {
		'padding': '5px',
		'margin': '0px auto',
		'width': '500px',
		'background': 'lightyellow',
		'border': '1px solid #cccccc'
	},
	inc: 5, //speed - pixel increment for each iteration of this marquee's movement
	mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
	moveatleast: 2,
	neutral: 150,
	persist: true,
	savedirection: true
});
//画像(#idImgslide)のスライド設定
marqueeInit({
	uniqueid: 'idImgslide',
	style: {
		'padding': '50px 0 0 0',
		'margin': '0px auto',
		'width': '260px',
		'height': '50px'
	},
	inc: 0, //speed - pixel increment for each iteration of this marquee's movement
	mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
	moveatleast: 2,
	neutral: 150,
	savedirection: false,
	random: false
});
</script>

オプションで速度やマウスオーバー時の挙動等が設定出来る様です。

2.HTMLの記述例

    <div class="marquee" id="idTxtslide">
    「BLINDER HIDDEN(ブラインダーヒドゥン)」は、WEBエンジニアの隠れたファインプレーを紹介するWEBサイトです。 発信情報は、JavaScript、jQuery、Ajax、PHP、Android、java、WordPress、Facebook、HTML5、HTML、CSS、CSS3、MySQL、Linux、コマンド、SEO、スマートフォン、見えないデザイン、アイデア 等
    </div>

	<div class="marquee" id="idImgslide"><img src="img1.jpg" border="0" /><img src="img2.jpg" border="0" /><img src="img3.jpg" border="0" /><img src="img4.jpg" border="0" /><img src="img5.jpg" border="0" /></div>

crawler:テキストや画像を水平に自動スライドするデモページ

ソース元:Dynamic Drive DHTML Scripts- Text and Image Crawler

やっぱりスライダー系って色々ありますね。
他にもまたありましたらまたご紹介します。