人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

}

});


●質問者: style_miya
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● tsuka115
●50ポイント

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

動作サンプル(背景画像が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();
}
});


2 ● a-kuma3
●50ポイント

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

$(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秒間隔で繰り返す」
という処理になってます。

関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ