![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
下記のソースでスライドショーを作りました。
画像はA~Dの四枚です。
これを、例えば、画像A、Bは1秒、画像Cは2秒、画像Dは3秒・・・といった感じで、画像毎に表示時間が変わるようにしたいのですが、オプションなどを調べましたが、みつけることができませんでした。
よろしくお願いいたします。
<script>
$(document).ready(function(){
$('#bxslider').bxSlider({
auto:true,
speed:1600,
pause:1200,
mode:'fade',
pager:false,
controls:false,
infiniteLoop:true
});
});
</script>
No.2ベストアンサー
- 回答日時:
ANo1です。
反応がないみたいですけれど、ANo1のような制御部分を作成しちゃうと、フェードで入替える部分を付け足せばbxslider本体を使わなくても良くなりますね。
ごく簡単な例を作成してみましたので、ご参考まで。(jQuery利用)
※ 時間制御の方法はANo1で提示したものと同じ考え方です。
※ スクリプト部のインデントは全角空白になっていますのでご注意。
<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<style type="text/css">
img { width:600px; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9. …
<script type="text/javascript">
$(window).on("load", function(){
var target = ".slider"; // 対象要素のセレクタ
var speed = 1600; // フェード時間(単位:msec)
var pause = [1,2,3,4]; // 表示時間(フェード時間を除く)(単位:sec)
var current = 0, style = { position:"absolute", top:0, left:0 };
var slider = $(target).css("position", "relative");
var elms = slider.children().css(style);
var loop = function(){
setTimeout(function(){
elms.eq(current++).fadeOut(speed);
current %= elms.length;
elms.eq(current).fadeIn(speed, loop);
} , pause[current] * 1000);
};
slider.height(elms.height());
elms.hide().eq(current).show();
loop();
});
</script>
</head>
<body>
<ul class="slider">
<li><img src="img/photo01.jpg" alt="" /></li>
<li><img src="img/photo02.jpg" alt="" /></li>
<li><img src="img/photo03.jpg" alt="" /></li>
<li><img src="img/photo04.jpg" alt="" /></li>
</ul>
</body>
</html>
No.1
- 回答日時:
こんにちは
bxsliderはたいして知りませんが、ご質問のようなことを想定しているライブラリは稀なのではないでしょうか。
フェードで画像が切り替わる専用なら、自作してしまってもそれほど面倒ではなさそうにも思いますが…
ドキュメントを見る限りでは、bxsliderには公開メソッドがいろいろ用意されているようですので、これを利用することでも実現は可能なように思えます。
http://bxslider.com/options
autoでスライド(=ご質問の例ではフェード)させずに、スクリプトからスライドさせるという考え方で、『お好みの時間制御しながら次のスライドを表示する』という部分だけを作ってあげれば良いのではないでしょうか。
(function loop(){
setTimeout( function(){
slider.goToNextSlide();
loop();
} , [1, 2, 3, 4][slider.getCurrentSlide()]*1000);
})();
みたいな仕組みにしておくことで、実現できませんか?
お礼が遅くなり申し訳ありませんでした。
難しくて、理解するのに少し時間がかかりそうです。そのため戸惑っていました。
次にいただいた回答も拝見いたします。
ありがとうございます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
vba クリップボードクリアにつ...
-
プログラミングを学ぼうと思い...
-
HLMT、CSSについて相談です。 ...
-
Google ColaboでGUI作成
-
VBAでパワーシェルを実行したい...
-
テキストファイルの1行目のみを...
-
pythonにてseleniumを使うも、...
-
ネットワークフォルダの中身を...
-
そのまま使っただけなのに・・...
-
このURLで広告を出しているのは...
-
以下の技能を無料で受講できる...
-
htaccessで特定のディレクトリ...
-
batファイル、コマンドプロンプ...
-
・オブジェクト指向のメリット...
-
REGZAに接続できない(パソコン)
-
プログラミング、アーキテクチ...
-
VBAのサブルーチンとプロシージ...
-
プログラムの起動、利用につい...
-
Pythonでの文字列からfloatへの...
-
プログラマーは誘惑にさらされ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
bxsliderで画像毎に表示時間を...
-
jQueryでメニューの開閉スライド
-
複数の自動スライドショー(jQue...
-
bxsliderで巻き戻しにする方法
-
if文でelseが実行されない
-
要素ごとにイベントが発生させたい
-
タブをフリックでスライドでき...
-
Javascriptを使ってQRコード読...
-
JavaScriptでtabindexの変更っ...
-
二つのbxsliderをレスポンシブ...
-
readyStateが4にならない原因
-
階層別の組織図の自動作成について
-
[jQuery UI] sortableを使いaja...
-
JavascriptからPHPへのAjax通信...
-
AjaxでJSONを受信すると、文字...
-
jQueryのblockUIをformのボタン...
-
.txtファイルの読み込み
-
SQLのmaxで求めた値を変数に代...
-
要素内を常に一番下を表示させたい
-
カンマ区切りのデータを配列に...
おすすめ情報