▼マウス操作で水平方向にスクロールする画像スライド
マウス操作でスクロールします。
自動スクロール&マウス操作で左右にスクロール。自動スクロール時の速度やスクロール方向なども指定可能です。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>設置サンプル</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <!-- JS --> <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="/content/lib/jquery/smoothdivscroll/jquery.smoothDivScroll-1.1.js" ></script> <script type="text/javascript"> $(function() { $("#makeMeScrollable1").smoothDivScroll({}); $("#makeMeScrollable2").smoothDivScroll({ autoScroll:"onstart", autoScrollDirection:"backandforth", autoScrollStep:1, autoScrollInterval:15, startAtElementId:"startAtMe", visibleHotSpots:"always"}); }); </script> <!-- CSS --> <style type="text/css"> /* You can alter this CSS in order to give SmoothDivScroll your own look'n'feel */ /* Invisible left hotspot */ div.scrollingHotSpotLeft { /* The hotspots have a minimum width of 100 pixels and if there is room the will grow and occupy 15% of the scrollable area (30% combined). Adjust it to your own taste. */ min-width:75px; width:10%; height:100%; /* There is a big background image and it's used to solve some problems I experienced in Internet Explorer 6. */ background-image:url(lib/jquery/smoothdivscroll/images/big_transparent.gif); background-repeat:repeat; background-position:center center; position:absolute; z-index:200; left:0; /* The first url is for Firefox and other browsers, the second is for Internet Explorer */ cursor:url(lib/jquery/smoothdivscroll/images/move.cur), url(lib/jquery/smoothdivscroll/images/move.cur),w-resize; } /* Visible left hotspot */ div.scrollingHotSpotLeftVisible { background-image:url(lib/jquery/smoothdivscroll/images/arrow_left.gif); background-color:#fff; background-repeat:no-repeat; opacity:0.35; /* Standard CSS3 opacity setting */ -moz-opacity:0.35; /* Opacity for really old versions of Mozilla Firefox (0.9 or older) */ filter:alpha(opacity = 35); /* Opacity for Internet Explorer. */ zoom:1; /* Trigger "hasLayout" in Internet Explorer 6 or older versions */ } /* Invisible right hotspot */ div.scrollingHotSpotRight { min-width:75px; width:10%; height:100%; background-image:url(lib/jquery/smoothdivscroll/images/big_transparent.gif); background-repeat:repeat; background-position:center center; position:absolute; z-index:200; right:0; cursor:url(lib/jquery/smoothdivscroll/images/move.cur), url(lib/jquery/smoothdivscroll/images/move.cur),e-resize; } /* Visible right hotspot */ div.scrollingHotSpotRightVisible { background-image:url(lib/jquery/smoothdivscroll/images/arrow_right.gif); background-color:#fff; background-repeat:no-repeat; opacity:0.35; filter:alpha(opacity = 35); -moz-opacity:0.35; zoom:1; } /* The scroll wrapper is always the same width and height as the containing element (div). Overflow is hidden because you don't want to show all of the scrollable area. */ div.scrollWrapper { position:relative; overflow:hidden; width:100%; height:100%; } div.scrollableArea { position:relative; width:auto; height:100%; } .makeme { width:100%; /* ウィンドウサイズいっぱいに */ height:240px; /* 画像の高さ */ position:relative; } .makeme * { position:relative; float:left; margin:0; padding:0; } </style> <link rel="stylesheet" type="text/css" href="/common/css/example.css"></head> <body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP & JavaScript Room</a> :: 設置サンプル</h1> <h3 class='h'>実行結果</h3> <div id="wrap"> <h1>設置サンプル</h1> <p>参照:<a href='http://www.smoothdivscroll.com/' target='_blank'>Smooth Div Scroll</a></p> <p>▼マウス操作で水平方向にスクロールする画像スライド</p> <!-- CODE --> <h2>デフォルト</h2> <p>マウス操作でスクロールします。</p> <div id="makeMeScrollable1" class="makeme"> <div class="scrollingHotSpotLeft"></div> <div class="scrollingHotSpotRight"></div> <div class="scrollWrapper"> <div class="scrollableArea"> <img src="http://farm2.static.flickr.com/1207/5110154053_88c5975b25_m.jpg" width="240" height="240" alt="ガウー" /> <img src="http://farm5.static.flickr.com/4088/5106685620_ab9e7f4c2a_m.jpg" width="240" height="240" alt="ぶぅ" /> <img src="http://farm2.static.flickr.com/1192/5106083431_46cf99e9af_m.jpg" width="240" height="240" alt="あたま♥" /> <img src="http://farm2.static.flickr.com/1049/5106604656_9ee3e0355c_m.jpg" width="240" height="240" alt="おまんじゅうみたい" /> <img src="http://farm5.static.flickr.com/4127/5106563750_e1294c6ffb_m.jpg" width="240" height="240" alt="ぐすぴー" /> <img src="http://farm5.static.flickr.com/4107/5105955903_f8a734620d_m.jpg" width="240" height="240" alt="甲羅干しちぅ" /> <img src="http://farm2.static.flickr.com/1052/5104584541_f17c2d9866_m.jpg" width="240" height="240" alt="お犬さま。lmikimiで遊んでみたw" /> <img src="http://farm5.static.flickr.com/4129/5085606708_bdaa8dfb40_m.jpg" width="240" height="240" alt="カメラ目線でとれないー" /> <img src="http://farm5.static.flickr.com/4104/5085007865_b631dac9e2_m.jpg" width="240" height="240" alt="脳天" /> <img src="http://farm5.static.flickr.com/4132/5085575690_5faed36307_m.jpg" width="240" height="240" alt="スフィンクス?!" /> <img src="http://farm5.static.flickr.com/4092/5085574146_15d6f2197d_m.jpg" width="240" height="240" alt="うとうと" /> </div> </div> </div> <h2>カスタマイズ</h2> <p>自動スクロール&マウス操作で左右にスクロール。自動スクロール時の速度やスクロール方向なども指定可能です。</p> <div id="makeMeScrollable2" class="makeme"> <div class="scrollingHotSpotLeft"></div> <div class="scrollingHotSpotRight"></div> <div class="scrollWrapper"> <div class="scrollableArea"> <img src="http://farm2.static.flickr.com/1207/5110154053_88c5975b25_m.jpg" width="240" height="240" alt="ガウー" /> <img src="http://farm5.static.flickr.com/4088/5106685620_ab9e7f4c2a_m.jpg" width="240" height="240" alt="ぶぅ" /> <img src="http://farm2.static.flickr.com/1192/5106083431_46cf99e9af_m.jpg" width="240" height="240" alt="あたま♥" /> <img src="http://farm2.static.flickr.com/1049/5106604656_9ee3e0355c_m.jpg" width="240" height="240" alt="おまんじゅうみたい" /> <img src="http://farm5.static.flickr.com/4127/5106563750_e1294c6ffb_m.jpg" width="240" height="240" alt="ぐすぴー" /> <img src="http://farm5.static.flickr.com/4107/5105955903_f8a734620d_m.jpg" width="240" height="240" alt="甲羅干しちぅ" /> <img src="http://farm2.static.flickr.com/1052/5104584541_f17c2d9866_m.jpg" width="240" height="240" alt="お犬さま。lmikimiで遊んでみたw" /> <img src="http://farm5.static.flickr.com/4129/5085606708_bdaa8dfb40_m.jpg" width="240" height="240" alt="カメラ目線でとれないー" /> <img src="http://farm5.static.flickr.com/4104/5085007865_b631dac9e2_m.jpg" width="240" height="240" alt="脳天" /> <img src="http://farm5.static.flickr.com/4132/5085575690_5faed36307_m.jpg" width="240" height="240" alt="スフィンクス?!" /> <img src="http://farm5.static.flickr.com/4092/5085574146_15d6f2197d_m.jpg" width="240" height="240" alt="うとうと" /> </div> </div> </div> <p> <input type="button" onclick='$("#makeMeScrollable2").smoothDivScroll("moveToElement", "first");' value="先頭へ" /> <input type="button" onclick='$("#makeMeScrollable2").smoothDivScroll("moveToElement", "number", 2);' value="3枚目へ" /> <input type="button" onclick='$("#makeMeScrollable2").smoothDivScroll("moveToElement", "last");' value="末尾へ" /> <input type="button" onclick='$("#makeMeScrollable2").smoothDivScroll("startAutoScroll");' value="自動再生開始" /> <input type="button" onclick='$("#makeMeScrollable2").smoothDivScroll("stopAutoScroll");' value="自動再生停止" /> </p> <!-- / CODE --> </div> </body> </html>