jquery.smoothDivScroll.jsを使って複数のサムネイル画像を左右に自動スライドさせる方法｜DAD UNION

jquery.smoothDivScroll.jsを使って複数のサムネル画像を左右に自動スライドさせる方法をご紹介します。以下2つの条件を設定可能な内容となります。

複数画像を左右どちらでも自動スライド可能
自動スライドがストップ可能

Contents

jquery.smoothDivScroll.jsを使って複数のサムネル画像を左右に自動スライドさせるJavaScriptの記述
jquery.smoothDivScroll.jsを使って複数のサムネイル画像を左右に自動スライドエリアのCSSの記述
jquery.smoothDivScroll.jsを使って複数のサムネイル画像を左右に自動スライドエリアのHTMLの記述
複数のサムネイル画像を左右に自動スライドさせるjQueryのデモページ
ソース元：jQuery Smooth Div Scroll – smooth content scrolling jQuery plugin

jquery.smoothDivScroll.jsを使って複数のサムネル画像を左右に自動スライドさせるJavaScriptの記述

※jquery.min.js、jquery-ui.min.js、jquery.smoothDivScroll-1.1.jsファイルを読み込みます。$(“スライドさせるエリア”).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>

jquery.smoothDivScroll.jsを使って複数のサムネイル画像を左右に自動スライドエリアの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>

jquery.smoothDivScroll.jsを使って複数のサムネイル画像を左右に自動スライドエリアの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-->

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