jQuery(javascript) にて画像のスライドを作成しようとしています。



fadeIn() → 1枚目画像。5秒ぐらい待って → fadeOut()

fadeIn() → 2枚目画像。5秒ぐらい待って → fadeOut()

fadeIn() → X枚目画像。5秒ぐらい待って → fadeOut()

をループして行いたいのですが、「5秒待って」の部分が、キューを理解していないのか思うようにいかず、苦戦しております。

上記のような処理にするには、どのように書いたら良いでしょうか?

ちなみに自身で書いてみたコードは下記となります。
下記だと一応、順番よくループでフェードイン、フェードアウトされるのですが、「5秒待って」ができず
フェードインしてすぐにフェードアウトする感じです。

$(function() {

var i = 1;

setInterval(function(){fedeInOut()},4000);

function fedeInOut() {

$("div.box_"+i).fadeIn(1000);
$("div.box_"+i).fadeOut(1000);

i++;

if(i > 5){
i = 1;
}

}

});

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2012/06/13 19:12:52
  • 終了:2012/06/13 22:39:54

回答(2件)

id:tsuka115 No.1

tsuka115回答回数96ベストアンサー獲得回数112012/06/13 19:32:06

ポイント50pt

違うかもしれませんが、自分はタイマーで作りました。

動作サンプル(背景画像が6秒ごとに切り替わります。)
http://error115.com/index.html

下記は外部jsの中身です。
6秒を5秒に変更するのは
var cng_time=5; とすれば良いです。

//ブラウザはIEか?ブラウザによる処理倍率
var isIE = false;
var myMul = 2;
setSpeed();

//---------------------------------------------------------------- setting
//フレームレート
var fps = 20;

//終了カウント(600sec=10min)
var my_cnt_end = 600 * 20 * myMul;

//切り替え画像
var ii=0;
var imgs=["./img/bg_tree.jpg","./img/bg_alps.jpg","./img/bg_hawaii_2.jpg","./img/bg_snow.jpg"];
var ii_max=imgs.length;
var cng_time=6;

//使用するか?
var isUse =!false;

//---------------------------------------------------------------- var
var intervalID;
var my_cnt = 0;

//---------------------------------------------------------------- init
preload(imgs);

//---------------------------------------------------------------- function
function setSpeed(){
var strUA = navigator.userAgent.toLowerCase();
//
if (strUA.indexOf("msie") > -1) {
isIE = true;
}
//IEならカウント数は1/2倍(処理速度が違うため)
if (isIE) {
myMul = 1;
}
}

//
function preload(imgs){
for(var i = 0; i < imgs.length; i++){
var imgObj = new Image();
imgObj.src = imgs[i];
}
}

// ********************************* start jQuery
$(function () {
//---------------------------------------------------------------- function
//

function startMovie() {
//■メインタイマー開始
var interval = Math.floor(1000 / fps);
intervalID = setInterval(onEnterFrame, interval);
}
//------------------------------------------------------------ onEnterFrame
//


function onEnterFrame() {
//■メイン連続処理
my_cnt++;

//カウンターで終了
if (my_cnt > my_cnt_end) {
//■メインタイマー終了
clearInterval(intervalID);
}
//画像切り替え
if (my_cnt % (fps * cng_time * myMul) == 0) {
//
$("#main_bg").fadeTo("slow",0,function(){
ii++;
if(ii>=ii_max){
ii=0;
}
var temp="url("+imgs[ii]+")";
$("#main_bg").css({"background":temp});
$("#main_bg").fadeTo("slow",1);
});
}
}

//
//------------------------------------------------------------ start
if(isUse){
startMovie();
}
});

id:a-kuma3 No.2

a-kuma3回答回数4523ベストアンサー獲得回数18792012/06/13 21:50:33

ポイント50pt

質問のコードを活かすと、こんな感じになるかな。

$(function() {

    var i = 0;  // 1じゃないのが、ミソ

    setInterval(function(){fedeInOut()},4000);

    function fedeInOut() {

        /* 最初の一回目は、フェードアウトがいらない */
        if (i > 0) {
            /* ひとつ前のをフェードアウト */
            $("div.box_"+i).fadeOut(1000);
        }

        /* 次の画像のインデックスを求める */
        i += 1;
        if (i > 5) {
            i = 1;
        }

        /* 次の画像をフェードイン */
        $("div.box_"+i).fadeIn(1000);

    }

}); 

質問のコードだと、
「『i番目をフェードインして、すぐフェードアウトする』というのを4秒間隔で繰り返す」
という処理になってます。

  • id:tsuka115
    ポイントどーもです。
    no.2の方法はシンプルですが、タイマー処理はたぶんieブラウザと他のブラウザで時間が変わるんじゃなかったかな?(違ったらすいませんです。)
    以前タイマーだけで作ったとき、倍半分処理速度が違ったので、ブラウザによる差を補正したりしてno.1の方法にしました。
    スクリプト長いですが(笑)ActionScriptっぽい感じでフレームレートを指定したり、function onEnterFrame() {の中身を入れ替えて、いろいろな繰り返し処理ができます。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません