Webページを作成しているのですが、JavaScriptで指定フォルダ内の画像をスライドショー形式で表示したいと思って、以下のコードを書いたのですが、どうも、上手く動作しないです。
おそらく最後の
$('#rotatingimage').fadeOut(1000,function(){
$(this).attr('src',images[currentImage].src);
$(this).fadeIn();
}
が上手く動いていないと思うのですが、よく分かりません。
どなたか、分かる方いらっしゃいましたら、教えて頂けると助かります。
よろしくお願い致します。
<script type='text/javascript'>
var images=new Array();
images[0]='images/1.jpg';
images[1]='images/2.jpg';
images[2]='images/3.jpg';
images[3]='images/4.jpg';
var currentImage = 0;
var preloaded=false;
var preloading = false;
function preload(){
preloading=true;
for(var i=0; i<images.length; i++){
var img = new Image();
img.src=images[i];
images[i] = img;
}
preloaded=true;
}
function animateImages(){
// if already preloading, we just want to return nothing
if(!preloaded && preloading) return;
// if not preloaded, we want to preload
if(!preloaded) preload();
// considering we have already loaded stuffs
currentImage++;
currentImage = currentImage % 4;
$('#rotatingimage').fadeOut(1000,function(){
$(this).attr('src',images[currentImage].src);
$(this).fadeIn();
}
);
}
</script>
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.1
- 回答日時:
勝手にjQueryだと思い込んで↓でどうでしょう。
3秒ごとに永久に変わり続けます
(行頭の全角空白は取り除いてください)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>gomi</title>
<style type="text/css">
</style>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.5");</script>
<script type="text/javascript">
$(function(){
var images=new Array();
images[0]='images/1.jpg';
images[1]='images/2.jpg';
images[2]='images/3.jpg';
images[3]='images/4.jpg';
var currentImage = 0;
var preloaded = false;
var preloading = false;
function preload(){
preloading=true;
for(var i=0; i<images.length; i++){
var img = new Image();
img.src=images[i];
images[i] = img;
}
preloaded=true;
}
function animateImages(){
if(!preloaded && preloading) return;
if(!preloaded) preload();
$('#rotatingimage').fadeOut(1000,function(){
currentImage++;
currentImage = currentImage % 4;
$(this).attr('src',images[currentImage].src);
$(this).fadeIn();
console.log($(this).attr('src'));
});
}
var timer = window.setInterval(animateImages,3000);
});
</script>
</head>
<body>
<div>
<img id="rotatingimage" src="images/1.jpg" alt="">
</div>
</body>
</html>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
Dreamweaver CS3を使用してい...
-
for文について
-
javascript 時計24時間表示
-
画像の下に説明文をつけて切り...
-
JavaScriptを外部ファイルにす...
-
画像と文字を同時に切り替えたい
-
JAVAで画像をボタンで切り替え...
-
imgのaltとtitleの要素を抜き出...
-
オンマウスで画像と文字を同時...
-
HPB_SCRIPT_ROV_50
-
jQueryでサーバー上のファイル...
-
MAX関数を使ってからLEFT JOIN...
-
iframe内のリンクが飛ばないの...
-
jqueryで要素の中身を要素の外...
-
変数内容をHTML内で表示する方法
-
c++std::string型をTCHARに変換...
-
removeEventListenerについて
-
CSS <div>の入れ子が反映さ...
-
複数画像のランダム複数表示(...
-
JSPでの画像ファイル表示
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
jQueryでサーバー上のファイル...
-
window.openで値の渡し方を教え...
-
JAVAで画像をボタンで切り替え...
-
HPB_SCRIPT_ROV_50
-
this.src等のthisについて
-
画像と文字を同時に切り替えたい
-
画像の下に説明文をつけて切り...
-
imgのsrcに値を設定するには
-
画像アップロードしたい
-
JavaScriptで画像置換えてクリ...
-
画像をランダムな座標に一定の...
-
Javaにて画像を変更させる動作...
-
クリッカブルマップでリモート...
-
イベントハンドラを完全に外部...
-
画像の入れ替え
-
【javascript】マウスオンで画...
-
JavaScriptを外部ファイルにす...
-
オンマウスで画像と文字を同時...
-
画像をクリックして変数に値を代入
-
HTMLページ内のタグに対しての...
おすすめ情報