jQueryのfadein()/feadeOut()メソッドでイメージのスライドショーを実装したサンプル
http://jsajax.com/articles/jQuerySimplestSlidesh …
の画像を順番通りでなくランダム表示に修正したいです。
自分なりに考えて作ってみたのですが、正しく機能しませんでした。
どこをどのように修正すればランダムになるのでしょうか?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Simplest jQuery Slideshow</title>
<style type="text/css">
body {font-family:Arial, Helvetica, sans-serif; font-size:12px;}
.fadein { position:relative; height:332px; width:500px; }
.fadein img { position:absolute; left:0; top:0; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4. …
<script type="text/javascript">
var imglist = new Array(
"http://farm3.static.flickr.com/2610/4148988872_9 …
"http://farm3.static.flickr.com/2597/4121218611_0 …
"http://farm3.static.flickr.com/2531/4121218751_a …
var select = Math.floor((Math.random() * 100)) % imglist.length;
var t0 = "<img src='"+imglist[select]+"' border='0' >";
$(function(){
$('.fadein img:gt(0)').hide();
setInterval(function() {
$('.fadein :first-child').fadeOut()
.next('t0').fadeIn()
.end().appendTo('.fadein');
}, 3000);
});
</script>
</head>
<body>
<div class="fadein">
<img src="http://farm3.static.flickr.com/2610/4148988872_9 … alt="" />
<img src="http://farm3.static.flickr.com/2597/4121218611_0 … alt="" />
<img src="http://farm3.static.flickr.com/2531/4121218751_a … alt="" />
</div>
</body>
</html>
No.1ベストアンサー
- 回答日時:
よくわかりませんが…
1)mglistを配列で定義しているけれど、対象の画像は全てHTMLソース内に
あるみたいなので、不要ではないでしょうか?
2)変数selectを乱数で発生させているけれど、最初の一回だけなので、「表示する
画像」をランダムに選択していることにはならないのでは?
3)変数t0にはタグの文字列が入るけれど、jqueryのセレクタにはならないのでは?
(そもそも、selectもt0も固定で変化しないみたいだし)
4)画像要素の順序を移動しているみたいですが、表示する画像は1個だけなので
順序を移動しなくても良さそうに思えますが?
(半透明状態だと、前後どちらにあっても透過して見える)
setIntervalにはしていませんが(←最初の処理にタイムラグが出るので)、こんなのでは?
(全角空白は半角に)
$(function(){
var elm = $(".fadein");
elm.children("img").hide();
(function(){
var img = elm.children("img:hidden");
elm.children("img:not(hidden)").fadeOut();
$(img.get(Math.floor(Math.random() * img.length))).fadeIn();
var id = setTimeout(arguments.callee, 3000);
})();
});
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
スライドを最後の画像で止めたい
-
readyStateが4にならない原因
-
JavaScriptでtabindexの変更っ...
-
jQueryを使いformでsubmitした...
-
jQueryで外部テキストファイル...
-
ボタンクリックした際、id末尾...
-
二つのbxsliderをレスポンシブ...
-
Javascriptを使ってQRコード読...
-
jQueryで、複数条件の絞り込み機能
-
jQuery を外部ファイルから呼び...
-
jqueryを使って非同期通信で10...
-
jqueryを使いajaxで取得したデ...
-
google翻訳ツール設置
-
階層別の組織図の自動作成について
-
FullCalendar の複数月表示につ...
-
jQuery3 reset()が効かない。
-
要素内を常に一番下を表示させたい
-
javascriptの動的読み込みにつ...
-
javascriptでXMLをajaxで読み込...
-
jquery.cookie.jsの使い方が分...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
readyStateが4にならない原因
-
JQueryのイーズインとイーズアウト
-
前後の「+」の意味は?
-
JScriptでDBへの接続方法について
-
jqueryでタグの中にある文字が...
-
JSONのデータから商品名の取得...
-
Yahoo!ウィジェットのgetElemen...
-
Ajaxでの、任意の件数でページ...
-
Ajax.Updater で受けたHTML中の...
-
ページ内リンクで#などのアンカ...
-
Ajaxの結果のページングの方法
-
変数の内容を別functionに渡したい
-
tableのtr要素をドラッグ&ドロ...
-
【再質問】計算(入数*単価)...
-
階層別の組織図の自動作成について
-
JavaScriptでtabindexの変更っ...
-
Javascriptを使ってQRコード読...
-
SQLのmaxで求めた値を変数に代...
-
インラインフレームを自動更新...
-
AjaxでJSONを受信すると、文字...
おすすめ情報