crawler.jsを使ってテキストや画像を水平に自動スライドする方法｜DAD UNION

この記事では、crawler.jsを使用して、テキストや画像を水平に自動スライドさせる方法を解説します。
この機能は、ウェブサイトに動きを追加し、視覚的な魅力を高めるのに役立ちます。
初心者エンジニアでも簡単に実装できるよう、丁寧に説明していきます。

Contents

CSSで水平スライドのデザインを設定
crawler.jsを使ってテキストや画像を水平に自動スライドするJavaScriptの記述
HTMLの記述
crawler：テキストや画像を水平に自動スライドするデモページ
まとめ

CSSで水平スライドのデザインを設定

まずは基本的なCSSを記述して、スライドの見た目を整えましょう。
以下のコードを参考にしてください。

<style type="text/css">
<!--
body{
	margin:0;
	padding:0;
}
h1{
	font-size:16px;
	font-weight:normal;
	line-height:2.0em;
	text-align:center;
	padding:15px 0;
}
#idWrap{
	width:600px;
	margin:0 auto;
	text-align:center;
}
-->
</style>

crawler.jsを使ってテキストや画像を水平に自動スライドするJavaScriptの記述

次に、crawler.jsを読み込んでJavaScriptコードを記述します。以下のサンプルコードは、テキストと画像をそれぞれスライドさせる設定例です。
marqueeInit()でスライドエリアのstyleやオプションを設定します。スライドテキストエリア（id=”idTxtslide”）とサムネイル画像エリア（id=”idImgslide”）を用意しました。

<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>

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

HTMLの記述

スライドするテキストや画像をHTML内に配置します。スライドテキストエリア（id=”idTxtslide”）とサムネイル画像エリア（id=”idImgslide”）を用意しました。以下のコードをコピペして使ってください。

<div id="idWrap">
    <h1>テキストや画像を水平に自動スライドします</h1>

    <div class="marquee" id="idTxtslide">
    「DAD UNION（ダットユニオン）」は「世のお父さんをもっと生きやすく」をテーマにしたWEB技術メディアです。
    </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>
    
</div><!--/idWrap-->