- ベストアンサー
スライドのJavaScriptを探しています。
このページのトップページのflashの様なスライドのJavaScriptを探しています。 http://www.mcube.jp/ 必要な条件は、３つあります。 ●メインの画像の左右にも画像が表示されていている（このサイトの様に半透明なら尚良し） ●スライドして切り替わる（このサイトの様に光ったりする余計なエフェクトは必要なし） ●下にサムネイルがついている これにとても近いスライド（Twilight Slideshow）は見つけたのですが、サムネイルがないため困っています。 上記の条件を満たすスライドのJavaScriptはありますでしょうか。 よろしくお願いします。
- rossi46mail
- お礼率96% (251/260)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
あんまり、両サイドに前後の画像が見えているタイプは知らないのですが、ご提示のライブラリの配布サイトの説明に「twilight eventを受け取れる」みたいなことが書いてありますので、デモ用のソースを利用して試してみました。 http://love-media.net/twilight-show-en スクリプトの内容はまったく見ていませんので、かなり適当ですがご参考までに。 細かなところは、逐次調整してください。 HTMLは配布のソースで、imgのwidth、heigthの指定部分だけCSS化しています。 （サムネイル画像でそのままソースを転用するためです） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head> <title>Sample</title> <link rel="stylesheet" type="text/css" href="css/twilight.css"> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/twilight.min.js"></script> <style type="text/css"> <!-- .twilight-wrapper .twilight-box img { width:750px; height:500px; } .twilight-wrapper .twilight-thumbnail { margin-left:10px; } .twilight-wrapper .twilight-thumbnail div { float:left; padding:2px; } .twilight-wrapper .twilight-thumbnail img { width:75px; height:50px; cursor:pointer; } //--> </style> <script type="text/javascript"> <!-- $(document).ready(function() { $('.twilight-wrapper').each(function(){ $('.twilight-box', this).clone().attr('class', 'twilight-thumbnail').appendTo($(this)); $('.twilight-thumbnail img', this).each(function(n){ $(this).click(function(){ $(document).trigger({ type: 'twilight', index: n}); }); }); }); $('.twilight-show').twilight(); }); //--> </script> </head> <body> <div class="twilight-wrapper"> <div class="slide-wrapper"> <div class="twilight-show"> <div class="twilight-box"> <div><img src="img/1.jpg" alt=""></div> <div><img src="img/2.jpg" alt=""></div> <div><img src="img/3.jpg" alt=""></div> <div><img src="img/4.jpg" alt=""></div> <div><img src="img/5.jpg" alt=""></div> <div><img src="img/6.jpg" alt=""></div> <div><img src="img/7.jpg" alt=""></div> <div><img src="img/8.jpg" alt=""></div> <div><img src="img/9.jpg" alt=""></div> <div><img src="img/10.jpg" alt=""></div> </div> <div class="arrow-left"><img src="img/arrow-left.png" alt=""></div> <div class="arrow-right"><img src="img/arrow-right.png" alt=""></div> </div> </div> </div> </body> </html>
お礼
回答ありがとうございます。 返事が遅くなってしまい大変申し訳ございませんでした。 まだ確認しておりませんが、先にお礼をさせていただきます。 遅くなってしまって本当にすみませんでした。
補足
確認いたしました。 素晴らしいです！！！ できました。 早速、使用させていただきます。 本当にありがとうございました。