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



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

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

1.JavaScriptの記述

<script type="text/javascript" src="http://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='$("#idScrollable").smoothDivScroll("stopAutoScroll");' onMouseOut='$("#idScrollable").smoothDivScroll("startAutoScroll");'>
        <div class="scrollWrapper">
        <div class="scrollableArea">
    <a href="http://www.blinderhidden.com/" target="_blank"><img src="http://www.blinderhidden.com/images/logo01.jpg" width="180" alt="WEBエンジニアの隠れたファインプレー | BLINDER HIDDEN"></a>
    <a href="http://www.blinderhidden.com/" target="_blank"><img src="http://www.blinderhidden.com/images/logo01.jpg" width="180" alt="WEBエンジニアの隠れたファインプレー | BLINDER HIDDEN"></a>
    <a href="http://www.blinderhidden.com/" target="_blank"><img src="http://www.blinderhidden.com/images/logo01.jpg" width="180" alt="WEBエンジニアの隠れたファインプレー | BLINDER HIDDEN"></a>
    <a href="http://www.blinderhidden.com/" target="_blank"><img src="http://www.blinderhidden.com/images/logo01.jpg" width="180" alt="WEBエンジニアの隠れたファインプレー | BLINDER HIDDEN"></a>
    <a href="http://www.blinderhidden.com/" target="_blank"><img src="http://www.blinderhidden.com/images/logo01.jpg" width="180" alt="WEBエンジニアの隠れたファインプレー | BLINDER HIDDEN"></a>
    <a href="http://www.blinderhidden.com/" target="_blank"><img src="http://www.blinderhidden.com/images/logo01.jpg" width="180" alt="WEBエンジニアの隠れたファインプレー | BLINDER HIDDEN"></a>
    <a href="http://www.blinderhidden.com/" target="_blank"><img src="http://www.blinderhidden.com/images/logo01.jpg" width="180" alt="WEBエンジニアの隠れたファインプレー | BLINDER HIDDEN"></a>
    <a href="http://www.blinderhidden.com/" target="_blank"><img src="http://www.blinderhidden.com/images/logo01.jpg" width="180" alt="WEBエンジニアの隠れたファインプレー | BLINDER HIDDEN"></a>
    <a href="http://www.blinderhidden.com/" target="_blank"><img src="http://www.blinderhidden.com/images/logo01.jpg" width="180" alt="WEBエンジニアの隠れたファインプレー | BLINDER HIDDEN"></a>
    <a href="http://www.blinderhidden.com/" target="_blank"><img src="http://www.blinderhidden.com/images/logo01.jpg" width="180" alt="WEBエンジニアの隠れたファインプレー | BLINDER HIDDEN"></a>
        </div>
        </div>
    </div>
</div><!--/idWrap-->

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

 
複数のサムネイル画像を左右に自動スライドさせるjQueryのデモ
 
ソース元:jQuery Smooth Div Scroll – smooth content scrolling jQuery plugin
 

TOPページのメイン画像切替り(画像クロスフェード切替りを無限ループするJS)同様、囃しの演出ですね。