JavaScript PR

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

記事内に商品プロモーションを含む場合があります

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

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

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

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

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

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

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

jQuery Smooth Div Scroll – smooth content scrolling jQuery plugin

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