javascript初心者です。
現在、複数の画像をループで順番にふわっと表示してるものを作っています。
/*=======以下html=================*/
<div id="slidearea">
<div id="mask"></div><!--/mask-->
<div id="slide">
<img src="img/01.jpg" class="slide">
<img src="img/02.jpg" class="slide">
<img src="img/03.jpg" class="slide">
</div>
</div><!--/slidearea-->
div#slideに入っているimgを順番に自動で表示させていきたいです。
/*=======以下JS======================*/
$(function(){
setInterval(
function(){
var img = $("#slide img"),
imglast = $("#slide img:last"),
imgfirst = $("#slide img:first"),
slide = $("#slide");
$(imglast).animate({opacity : "0"},{
duration : 2000,complete:
function(){
$(imglast).clone().prependTo(slide);
$(imgfirst).css({opacity : "1"});
$(imglast).remove();
},
});
},6000);
});
だと動くのですが、
$(function(){
var img = $("#slide img"),
imglast = $("#slide img:last"),
imgfirst = $("#slide img:first"),
slide = $("#slide");
setInterval(
function(){
$(imglast).animate({opacity : "0"},{
duration : 2000,complete:
function(){
$(imglast).clone().prependTo(slide);
$(imgfirst).css({opacity : "1"});
$(imglast).remove();
},
});
},6000);
});
変数をsetIntervalから外へ出すと、おかしく表示されてしまします。
これはどのようなことから起きるのでしょうか?
初歩的な質問ですが、よろしくお願いいたします。
A 回答 (1件)
- 最新から表示
- 回答順に表示
No.1
- 回答日時:
>これはどのようなことから起きるのでしょうか?
変数を外に出しても参照はできていますが、値の内容が参照したい値と違うものであることが直接の原因です。
変数を外に出した場合は、imglast、imgfirstなどは常に固定の要素を示すことになります。
一方で、setIntervalで指定している関数では画像の順序を入替えていますので、setInterval内で変数定義を実行した場合は、その都度最新の状態でのimglast、imgfirstが取得されます。このため固定での要素指定とは違った結果となります。
このためアニメーションの対象となる要素が異なってしまうといったことが起きます。
DOM要素の順序を変えるようなことはせずに、参照する場所をindexのような順番値で保存しておくようなロジックにすれば、ご質問のように変数定義を外側に出しても意図通りに動作すると思います。
また、順序を記憶しておかなくても、要素に"active"などのクラス設定をすることで、これを目印にするという方法もよく用いられているようです。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 【HTML】【CSS】【Swiper】 元の画像は横1200×縦600なのですが、実際のサイト上に反 5 2022/07/16 13:57
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- HTML・CSS CSSのホバーエフェクト 1 2023/06/19 06:53
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS flex の各子要素を横幅 100% にしたい 1 2022/09/22 21:25
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
JavaScript スクロール制御
-
VBAでIEを動かす場合、下記の①...
-
MAX関数を使ってからLEFT JOIN...
-
htmlの記述で link rel=styles...
-
画像の上に画像リンクを貼る方法
-
スライダーを実装した場合、ペ...
-
背景色を一定時間ごとにランダ...
-
文字を固定したいのですが…
-
javascriptでURLにマウスオーバー
-
[急ぎ] videoタグで埋め込んだm...
-
文字と数字が混在する要素のsor...
-
離れた場所にマウスオーバーで...
-
ホームページビルダー15 メニュ...
-
c++std::string型をTCHARに変換...
-
タブで開いてさらにタブ内をア...
-
1行で左寄せと右寄せと中央揃え...
-
オンマウス時に別画像を上に重...
-
javascriptでのパスについて
-
文字をクリックしたら別の文字...
-
javascriptでpostした値が取得...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
デフォルト非表示にしたい。【t...
-
jQueryで同じクラス名のものを...
-
Colorboxがうまく設置できません
-
Javascript初心者|jQueryの.va...
-
jQueryでのドラッグアンドドロ...
-
アップロードファイルの種類に...
-
embed要素のsrc属性の値を変更...
-
fancyboxのポップアップ時の画...
-
JQueryで画像の上で文字を動かす
-
一定時間で入れ替わるバナー画...
-
ボタンを押すたびに交互に切り...
-
全部のサイコロをjavascriptで...
-
交互に入れ替わる画像を複数配置
-
clear機能を失わずにファイルア...
-
JavaScriptが、Firefoxで動かな...
-
「画像クリックで音声再生」を ...
-
bxsliderで最初に縦に複数表示...
-
JQueryを使用して、画像をドラ...
-
イラストのボタンを押したとき...
-
背景色と連動するスライドショ...
おすすめ情報