JavaScript

jQueryでサムネイル画像を左右に自動スライドさせる方法 | smoothDivScroll.jsの使い方

  /

この記事では、jQueryのプラグイン「jquery.smoothDivScroll.js」を使用して、複数のサムネイル画像を左右に自動でスライドさせる方法をご紹介します。このプラグインを利用することで、以下の2つの条件を設定することが可能です。

  • 画像を左右どちらにでも自動スライドさせる
  • 自動スライドを停止させる

これらの設定を実現するための具体的な手順を、JavaScript、CSS、HTMLの記述を交えて説明します。

Contents

必要なファイルの読み込み、JavaScriptの記述

まず、以下の3つのJavaScriptファイルをHTMLに読み込みます。

  • jQuery（jquery.min.js）
  • jQuery UI（jquery-ui.min.js）
  • smoothDivScroll（jquery.smoothDivScroll-1.1.js）

次に、smoothDivScrollプラグインを使用して、スライドエリアに対してスライド方向、自動かどうか、ループするか、速度などのオプションを設定します。
$(“スライドさせるエリア”).smoothDivScroll(｛オプション｝)で複数サムネイル画像をスライドさせるエリアに対して、スライド方向、自動かどうか、ループするか、速度等をオプションで設定します。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src=" https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.smoothDivScroll-1.1.js"></script>
<script type="text/javascript">
$(function() {

		$("#idScrollable").smoothDivScroll({
		autoScroll:"onstart", 
		autoScrollDirection:"endlessloopleft", 
		autoScrollStep:1,
		autoScrollInterval:20,	//速度
		startAtElementId:"startAtMe", 
		visibleHotSpots:"always"});

});
</script>

CSSの記述

スライドエリアのスタイルを設定するためのCSSの記述です。必要に応じて変更してください。

<style type="text/css">
<!--
div.scrollWrapper {
	position:relative;
	overflow:hidden;
	width:100%;
	height:100%;
}
div.scrollableArea {
	position:relative;
	width:auto; height:100%;
	background-color:#cccccc;
}
.clSum {
	width:100%;
	height:88px;
	position:relative;
}
.clSum * {
	position:relative;
	float:left;
	margin:0; padding:0;
}
div.scrollableArea img{
	padding:4px !important;
}
#idWrap{
	width:960px;
	margin:0 auto;
}
-->
</style>

HTMLの記述

スライドエリアのHTML構造です。自動スライドエリア（id=”idScrollable”）にマウスオーバー（onMouseOver）した時に自動スクロールを停止し、マウスアウト（onMouseOut）した時に自動スクロールを再開する設定にしています。

<div id="idWrap">

<div id="idScrollable" class="clSum" onmouseover="$(&quot;#idScrollable&quot;).smoothDivScroll(&quot;stopAutoScroll&quot;);" onmouseout="$(&quot;#idScrollable&quot;).smoothDivScroll(&quot;startAutoScroll&quot;);">

<div class="scrollWrapper">

<div class="scrollableArea">
    <img src="i1.jpg" width="300" alt="">
    <img src="i2.jpg" width="300" alt="">
    <img src="i3.jpg" width="300" alt="">
    <img src="i4.jpg" width="300" alt="">
    <img src="i5.jpg" width="300" alt="">
</div>

</div>

</div>

</div>
<!--/idWrap-->

　
マウスオーバー時に自動スライドを停止し、マウスアウト時にスライドを再スタートさせる設定にしてます。

複数のサムネイル画像を左右に自動スライドさせるjQueryのデモページ

この設定を元にしたデモページを以下のリンクからご覧いただけます。

複数のサムネイル画像を左右に自動スライドさせるjQueryのデモ

ソース元：jQuery Smooth Div Scroll – smooth content scrolling jQuery plugin

詳しい情報やプラグインの詳細は、以下の公式サイトから確認できます。

jQuery Smooth Div Scroll – smooth content scrolling jQuery plugin

このようにして、jquery.smoothDivScroll.jsを使って複数のサムネイル画像を左右に自動スライドさせることができます。この記事を参考にして、ぜひ自分のプロジェクトに取り入れてみてください。

まとめ

本記事では、jQueryのプラグイン「jquery.smoothDivScroll.js」を使用して複数のサムネイル画像を左右に自動スライドさせる方法を紹介しました。必要なファイルの読み込みから、JavaScript、CSS、HTMLの具体的なコード例を示し、最後に実際のデモページへのリンクを提供しました。

この方法を用いることで、ユーザーに視覚的な楽しさを提供し、ウェブサイトのインタラクティブ性を向上させることができます。ぜひ試してみてください。

　
※流用される場合は自己責任でお願いします。
　デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。

複数サムネイル jquery.smoothDivScroll 自動スライド
RELATED POST