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

解決済みの質問

jQuery Cycle Pluginで表示時間を

jQuery Cycle Pluginで4枚の画像をフェードで切り替えて順に表示するものを作っています。
そこでできることなら各画像の表示時間(timeoutの部分)をそれぞれで変えたいのですが、そのような方法はあるのでしょうか?
(フェードの時間(speed)は一定で構いません)

1枚目……………1秒表示
    ↓(フェード1秒)
2枚目……………4秒表示
    ↓(フェード1秒)
3枚目……………2秒表示
    ↓(フェード1秒)
4枚目……………1秒表示(ここで停止なので厳密には秒数は関係なし)

以下のJavaScriptでは表示時間をそれぞれ変えることが可能のようなのですが、
こちらはフェード機能がないようでして…。
http://attosoft.info/blog/release-animate-image-js/

Cycle Pluginにこだわっているわけではありませんので、他の方法で実現可能なものがあれば
教えていただないでしょうか?

※実装しなければならない条件
 ・切り替え方法はフェード
 ・リピートしない(4枚目で止まる)
 ・各画像の表示時間をそれぞれで変える ←←←これを追加したい

※その他の条件
 ・HTML 4.01 Transitional
 ・IE6でも表示可能
 ・Flash使用不可

よろしくお願いします。

投稿日時 - 2011-08-18 22:54:56

QNo.6951935

すぐに回答ほしいです

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

よくわかってませんが、

こんな感じ?(全角空白は半角に)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>test</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<style type="text/css">
<!--
#target { position:relative; }
#target img { position:absolute; top:0; left:0; }
//-->
</style>

<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
<script type="text/javascript">
<!--
$(function(){
 var imgdata = [
  [2000,"img/photo02.jpg"],
  [5000,"img/photo03.jpg"],
  [3000,"img/photo04.jpg"]
 ];
 var count=0;
 setTimeout(change, imgdata[count][0]);

 function change(){
  var t = $("#target");
  var img = $("img:first", t)
  img.clone().appendTo(t).fadeOut(1000, function(){
   $(this).remove();
  });
  img.attr("src", imgdata[count++][1]);
  if(imgdata[count]) setTimeout(change, imgdata[count][0]);
 }
});
//-->
</script>
</head>
<body>

<div id="target">
<img src="img/photo01.jpg" alt="">
</div>

</body>
</html>

投稿日時 - 2011-08-22 11:15:26

お礼

お礼が遅くなってしまい申し訳ありません。
書かれている方法で問題なく制御できました。
本当に助かりました。ありがとうございました。

投稿日時 - 2011-08-30 21:00:22

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

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

回答(1)