- ベストアンサー
自動で表示切り替えをしたい！！
下記のリストを、数秒ごとに一つずつ順に表示させるにはどうすればよいでしょうか？ クリックすればそこに移動し、ほっとくとまた動き出すものが良いのですが。 （本当は、オンマウスだけで表示が替わるようにしたいです！！） アドバイスお願いします＞＜ <script type="text/javascript" src="jquery-1.6.1.min.js"></script> <script type="text/javascript"> $(document).ready(function() { //Show Banner $(".main_image .desc").show(); //Show Banner $(".main_image .block").animate({ opacity: 0.85 }, 1 ); //Set Opacity //Click and Hover events for thumbnail list $(".image_thumb ul li:first").addClass('active'); $(".image_thumb ul li").click(function(){ //Set Variables var imgAlt = $(this).find('img').attr("alt"); //Get Alt Tag of Image var imgTitle = $(this).find('a').attr("href"); //Get Main Image URL var imgDesc = $(this).find('.block').html(); //Get HTML of block var imgDescHeight = $(".main_image").find('.block').height(); //Calculate height of block if ($(this).is(".active")) { //If it's already active, then... return false; // Don't click through } else { //Animate the Teaser $(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() { $(".main_image .block").html(imgDesc).animate({ opacity: 0.85, marginBottom: "0" }, 250 ); $(".main_image img").attr({ src: imgTitle , alt: imgAlt}); }); } $(".image_thumb ul li").removeClass('active'); //Remove class of 'active' on all lists $(this).addClass('active'); //add class of 'active' on this list only return false; }) .hover(function(){ $(this).addClass('hover'); }, function() { $(this).removeClass('hover'); }); //Toggle Teaser $("a.collapse").click(function(){ $(".main_image .block").slideToggle(); $("a.collapse").toggleClass("show"); }); });//Close Function </script> </head> <body> <div id="main" class="container"> <div class="main_image"> <img src="banner1.jpg" alt="- banner1"> <div class="desc"> <div class="block"> <h2>Slowing Down</h2> <small>04/10/09</small> <p>ここにテキストをうちます。<br><a href="###" target="_top">◇ リンクテキスト ◇</a></p> </div><!-- block --> </div><!-- desc --> </div><!-- main_image --> <div class="image_thumb"> <ul> <li> <a href="banner1.jpg"><img src="banner1_thumb.jpg" alt="Slowing Dow" width="50" height="38"></a> <div class="block"> <h2>Slowing Down</h2> <small>04/10/09</small> <p>ここにテキストをうちます。<br><a href="###" target="_top">◇ リンクテキスト ◇</a></p> </div><!-- block --> </li> <li> <a href="banner2.jpg"><img src="banner2_thumb.jpg" alt="Organized Food Fight" width="50" height="38"></a> <div class="block"> <h2>タイトル2</h2> <small>04/11/09</small> <p>ここにテキストをうちます。<br><a href="###" target="_top">◇ リンクテキスト ◇</a></p> </div><!-- block --> </li> <li> <a href="banner3.jpg"><img src="banner3_thumb.jpg" alt="Endangered Species" width="50" height="38"></a> <div class="block"> <h2>タイトル3</h2> <small>04/12/09</small> <p>ここにテキストをうちます。<br><a href="###" target="_top">◇ リンクテキスト ◇</a></p> </div><!-- block --> </li> <li> <a href="banner4.jpg"><img src="banner4_thumb.jpg" alt="Evolution" width="50" height="38"></a> <div class="block"> <h2>タイトル4</h2> <small>04/13/09</small> <p>ここにテキストをうちます。<br><a href="###" target="_top">◇ リンクテキスト ◇</a></p> </div><!-- block --> </li> <li> <a href="banner5.jpg"><img src="banner5_thumb.jpg" alt="Puzzled Putter" width="50" height="38"></a> <div class="block"> <h2>タイトル5</h2> <small>04/14/09</small> <p>ここにテキストをうちます。<br><a href="###" target="_top">◇ リンクテキスト ◇</a></p> </div><!-- block --> </li> <li> <a href="banner6.jpg"><img src="banner6_thumb.jpg" alt="Secret Habit" width="50" height="38"></a> <div class="block"> <h2>タイトル6</h2> <small>04/15/09</small> <p>ここにテキストをうちます。<br><a href="###" target="_top">◇ リンクテキスト ◇</a></p> </div><!-- block --> </li> </ul> </div><!-- image_thumb --> </div><!-- container --> </body>
- goaldast
- お礼率46% (97/210)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
そのまま付けたし的な処置ではありますが… スクリプトの前半をこんな風にしてみてはいかがでしょうか？ 最初の方の5000（msec）が自動表示の時間間隔（5000＝5秒） $(document).ready(function() { //************ Intervalの処理を追加 var interval_id; function interval(){ interval_id = setInterval(function(){ var next = $(".image_thumb ul li.active").next("li"); if(!next.length) next = $(".image_thumb ul li:first"); next.click(); }, 5000); } //Show Banner $(".main_image .desc").show(); //Show Banner $(".main_image .block").animate({ opacity: 0.85 }, 1 ); //Set Opacity //Click and Hover events for thumbnail list $(".image_thumb ul li:first").addClass('active'); interval(); //*************** ここに1行追加 $(".image_thumb ul li").click(function(){ //Set Variables var imgAlt = $(this).find('img').attr("alt"); //Get Alt Tag of Image var imgTitle = $(this).find('a').attr("href"); //Get Main Image URL var imgDesc = $(this).find('.block').html(); //Get HTML of block var imgDescHeight = $(".main_image").find('.block').height();//Calculate height of block if ($(this).is(".active")) { //If it's already active, then... return false; // Don't click through } else { if(interval_id) clearInterval(interval_id); //*************** ここに1行追加 //Animate the Teaser $(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() { $(".main_image .block").html(imgDesc).animate({ opacity: 0.85,marginBottom: "0" }, 250, function(){ interval(); // *************** この前後の行を修正 }); $(".main_image img").attr({ src: imgTitle , alt: imgAlt}); }); } //以下同じ ＞本当は、オンマウスだけで表示が替わるようにしたいです clickイベントで動作するようになっているのをhoverまたはmouseoverにすれば可能です。でも、全体が動くような動作なのでマウスオンだとユーザビリティが悪くなるように感じるのは私だけかなぁ？
お礼
ありがとうございます。問題なくできました！ 私はJavascriptはまだまだ勉強中なので助かりました。 マウスオンだとユーザビリティの配慮に欠けているかなと私も 思っているのですが、やっぱりそうですよね。 迷いどころです… 不明な点など、まだまだここで質問すると思いますので、また ご縁がありましたら是非ご教授お願いします。 本当にありがとうございました！