参照:Nivo Slider
▼9つのエフェクト効果がかけられるイメージスライダー
ステータス:
<!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.3.2/jquery.min.js" ></script> <script type="text/javascript" src="/content/lib/jquery/jquery.nivo.slider.js" ></script> <script type="text/javascript"> $(function() { $('#slider1').nivoSlider(); $('#slider2').nivoSlider({ effect:'random', //Specify sets like: 'fold,fade,sliceDown' slices:15, startSlide:0, //Set starting Slide (0 index) directionNav:true, //Next & Prev animSpeed:500, //Slide transition speed pauseTime:3000, directionNavHide:true, //Only show on hover controlNav:true, //1,2,3... keyboardNav:true, //Use left & right arrows pauseOnHover:true, //Stop animation while hovering manualAdvance:false, //Force manual transitions captionOpacity:0.6, //Universal caption opacity }); $('#slider3').nivoSlider({ controlNavThumbs:true, controlNavThumbsSearch: '.jpg', //Replace this with... controlNavThumbsReplace: '_t.jpg', //...this in thumb Image src beforeChange: function(){$("#slider3_status").html("スライド切替前");}, afterChange: function(){$("#slider3_status").html("スライド切替後");}, slideshowEnd: function(){$("#slider3_status").html("スライド終了");} //Triggers after all slides have been shown }); }); </script> <!-- CSS --> <style type="text/css"> /* * jQuery Nivo Slider v2.1 * http://nivo.dev7studios.com * * Copyright 2010, Gilbert Pellegrom * Free to use and abuse under the MIT license. * http://www.opensource.org/licenses/mit-license.php * * March 2010 */ /* The Nivo Slider styles */ .nivoSlider { position:relative; width:240px; /* 画像の幅 */ height:240px; margin:20px 20px 40px 20px; padding:0; background:#202834 url("/content/img/ajax/loading.gif") no-repeat 50% 50%; -moz-box-shadow:0px 0px 10px #333; -webkit-box-shadow:0px 0px 10px #333; box-shadow:0px 0px 10px #333; } #slider3.nivoSlider { width:500px; height:500px; } .nivoSlider a { border:0; } .nivoSlider img { position:absolute; top:0; left:0; display:none; } /* If an image is wrapped in a link */ .nivoSlider a.nivo-imageLink { position:absolute; top:0; left:0; width:100%; height:100%; margin:0; padding:0; z-index:60; display:none; } /* The slices in the Slider */ .nivo-slice { display:block; position:absolute; z-index:50; height:100%; } /* Caption styles */ .nivo-caption { position:absolute; left:0; bottom:0; background:#fff; color:#000; font-size:10px; opacity:0.6; /* Overridden by captionOpacity setting */ width:100%; z-index:89; } .nivo-caption p { margin:0; padding:5px; } .nivo-caption a { display:inline!important; } .nivo-html-caption { display:none; } /* Direction nav styles (e.g. Next & Prev) */ .nivo-directionNav a { display:block; width:30px; height:30px; background:url("/content/img/ajax/arrows2.png") no-repeat; text-indent:-9999px; position:absolute; z-index:99; cursor:pointer; } a.nivo-nextNav { background-position:-30px 0; top:45%; right:15px; } a.nivo-prevNav { top:45%; left:15px; } /* Control nav styles (e.g. 1,2,3...) */ .nivo-controlNav a { position:relative; z-index:99; cursor:pointer; } .nivo-controlNav a.active { font-weight:bold; } #slider3 { margin-bottom:130px; } #slider3 .nivo-controlNav { position:absolute; left:19%; bottom:-110px; } #slider3 .nivo-controlNav img { display:inline; position:relative; margin-right:10px; -moz-box-shadow:0px 0px 5px #333; -webkit-box-shadow:0px 0px 5px #333; box-shadow:0px 0px 5px #333; } #slider3 .nivo-controlNav a.active img { -moz-box-shadow:0px 0px 5px #fff; -webkit-box-shadow:0px 0px 5px #fff; box-shadow:0px 0px 5px #fff; } #slider3 .nivo-caption { } #slider1 .nivo-controlNav, #slider2 .nivo-controlNav, #slider4 .nivo-controlNav { position:absolute; left:47%; bottom:-30px; } #slider1 .nivo-controlNav a, #slider2 .nivo-controlNav a, #slider4 .nivo-controlNav a { display:block; width:10px; height:10px; background:url("/content/img/ajax/bullets.png") no-repeat; text-indent:-9999px; border:0; margin-right:3px; float:left; } #slider1 .nivo-controlNav a.active, #slider2 .nivo-controlNav a.active, #slider4 .nivo-controlNav a.active { background-position:-10px 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> <h2 class='h'>設置サンプル</h2> <h3 class='h'>実行結果</h3> <div id="wrap"> <h1>設置サンプル</h1> <p>参照:<a href='http://nivo.dev7studios.com/' target='_blank'>Nivo Slider</a></p> <p>▼9つのエフェクト効果がかけられるイメージスライダー</p> <!-- CODE --> <h2>デフォルト</h2> <div id="slider1"> <img src="http://farm2.static.flickr.com/1347/5102269406_1011f6ce14_m.jpg" alt="あい♥いっと" /> <img src="http://farm5.static.flickr.com/4112/5102266032_4f272fd87d_m.jpg" alt="ぱちクリ(((o(*゚▽゚*)o)))" /> <img src="http://farm2.static.flickr.com/1208/5102266466_123033e5ed_m.jpg" alt="イヤー(>_<)" /> </div> <h2>画像リンク+キャプションをHTML文で指定(strong要素+a要素使用)</h2> <div id="slider2"> <a href="http://www.flickr.com/photos/22559849@N06/5102269406/"><img src="http://farm2.static.flickr.com/1347/5102269406_1011f6ce14_m.jpg" alt="" title="#htmlcaption1" /></a> <a href="http://www.flickr.com/photos/22559849@N06/5102266032/"><img src="http://farm5.static.flickr.com/4112/5102266032_4f272fd87d_m.jpg" alt="" title="#htmlcaption2" /></a> <a href="http://www.flickr.com/photos/22559849@N06/5102266466/"><img src="http://farm2.static.flickr.com/1208/5102266466_123033e5ed_m.jpg" alt="" title="#htmlcaption3" /></a> </div> <div id="htmlcaption1" class="nivo-html-caption"> <strong>あい♥いっと</strong> <em>from 「PIERRE HERME PARIS Aoyama」のディスプレイ!</em> <a href="http://www.pierreherme.co.jp/boutiques/">お店のHPはココ</a>. </div> <div id="htmlcaption2" class="nivo-html-caption"> <strong>ぱちクリ(((o(*゚▽゚*)o)))</strong> <em>from 「PIERRE HERME PARIS Aoyama」のディスプレイ!</em> <a href="http://www.pierreherme.co.jp/boutiques/">お店のHPはココ</a>. </div> <div id="htmlcaption3" class="nivo-html-caption"> <strong>イヤー(>_<)</strong> <em>from 「PIERRE HERME PARIS Aoyama」のディスプレイ!</em> <a href="http://www.pierreherme.co.jp/boutiques/">お店のHPはココ</a>. </div> <h2>サムネイル付き</h2> <p>ステータス:<span id="slider3_status"> </span></p> <div id="slider3"> <img src="http://farm2.static.flickr.com/1347/5102269406_1011f6ce14.jpg" alt="" title="あい♥いっと" /> <img src="http://farm5.static.flickr.com/4112/5102266032_4f272fd87d.jpg" alt="" title="ぱちクリ(((o(*゚▽゚*)o)))" /> <img src="http://farm2.static.flickr.com/1208/5102266466_123033e5ed.jpg" alt="" title="イヤー(>_<)" /> </div> <!-- / CODE --> </div> </body> </html>