jquery.smoothDivScroll:複数のサムネイル画像を左右に自動スライドさせる

今回は複数サムネルを水平方向に自動スライド可能なことを前提に、以下の2リクエストをクリアできる内容です。

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

1.JavaScriptの記述

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

上記は細かく設定出来る様です。

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

3.HTMLの記述

<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 Smooth Div Scroll – smooth content scrolling jQuery plugin

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