-PR-
  • すぐに回答を!
  • 質問No.6811740
解決
済み

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

  • 閲覧数224
  • ありがとう数1
  • 気になる数0
  • 回答数1
  • コメント数0

お礼率 46% (97/210)

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

<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>
通報する
  • 回答数1

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

  • 回答No.1
レベル14

ベストアンサー率 61% (1594/2576)

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

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

お礼率 46% (97/210)

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

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

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

本当にありがとうございました!
投稿日時 - 2011-06-16 10:30:18
-PR-
-PR-
  • 回答数1
このQ&Aで解決しましたか?

関連するQ&A

-PR-
-PR-
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する
-PR-
-PR-
-PR-

特集


関連するQ&A

-PR-

ピックアップ

-PR-
ページ先頭へ