こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

自動で表示切り替えをしたい!!

下記のリストを、数秒ごとに一つずつ順に表示させるにはどうすればよいでしょうか?
クリックすればそこに移動し、ほっとくとまた動き出すものが良いのですが。
(本当は、オンマウスだけで表示が替わるようにしたいです!!)
アドバイスお願いします><

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

投稿日時 - 2011-06-15 18:23:54

QNo.6811740

すぐに回答ほしいです

質問者が選んだベストアンサー

そのまま付けたし的な処置ではありますが…

スクリプトの前半をこんな風にしてみてはいかがでしょうか?
最初の方の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にすれば可能です。でも、全体が動くような動作なのでマウスオンだとユーザビリティが悪くなるように感じるのは私だけかなぁ?

投稿日時 - 2011-06-15 23:29:13

お礼

ありがとうございます。問題なくできました!
私はJavascriptはまだまだ勉強中なので助かりました。

マウスオンだとユーザビリティの配慮に欠けているかなと私も
思っているのですが、やっぱりそうですよね。
迷いどころです…

不明な点など、まだまだここで質問すると思いますので、また
ご縁がありましたら是非ご教授お願いします。

本当にありがとうございました!

投稿日時 - 2011-06-16 10:30:18

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問