![](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を探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・「I love you」 をかっこよく翻訳してみてください
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・昔のあなたへのアドバイス
- ・かっこよく答えてください!!
- ・あなたが好きな本屋さんを教えてください
- ・スタッフと宿泊客が全員斜め上を行くホテルのレビュー
- ・【大喜利】【投稿~8/27】 こんなガソリンスタンド二度と来るか!なぜそう思った?
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・【お題】動物のキャッチフレーズ
- ・【お題】甲子園での思い出の残し方
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・「それ、メッセージ花火でわざわざ伝えること?」
- ・自分用のお土産
- ・人生で一番お金がなかったとき
- ・一番好きなみそ汁の具材は?
- ・泣きながら食べたご飯の思い出
- ・ちょっと先の未来クイズ第1問
- ・ゴリラ向け動画サイト「ウホウホ動画」にありがちなこと
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
Google ColaboでGUI作成
-
近年誕生したプログラミング言語
-
プログラマーに向いている人の...
-
ホログラムを作ってくれる会社...
-
PythonのTkinter詳しい方へ。画...
-
Pythonでの文字列からfloatへの...
-
vba クリップボードクリアにつ...
-
このURLで広告を出しているのは...
-
プログラムの起動、利用につい...
-
プログラミング言語について
-
テキストファイルの1行目のみを...
-
https://paiza.jp/challenges/5...
-
batファイル、コマンドプロンプ...
-
Trix のツールバー(?)を上では...
-
長門有希のようにコンピュータ...
-
Win11で作業を自動化したいです...
-
マイクロソフトがvbを捨てたの...
-
VBAでパワーシェルを実行したい...
-
そのまま使っただけなのに・・...
-
HLMT、CSSについて相談です。 ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
bxsliderで画像毎に表示時間を...
-
if文でelseが実行されない
-
URLによってHTMLのテキストを変...
-
bxsliderで巻き戻しにする方法
-
jQUery:フェードアニメーショ...
-
Javascriptでリンクの書き換え
-
タブをフリックでスライドでき...
-
Javascriptを使ってQRコード読...
-
SQLのmaxで求めた値を変数に代...
-
JavaScriptでtabindexの変更っ...
-
階層別の組織図の自動作成について
-
JavascriptからPHPへのAjax通信...
-
カンマ区切りのデータを配列に...
-
インラインフレームを自動更新...
-
Selenium Basicの件
-
jQueryのblockUIをformのボタン...
-
jQueryを使いformでsubmitした...
-
フレーム内の要素へのXPATHはど...
-
二つのbxsliderをレスポンシブ...
-
readyStateが4にならない原因
おすすめ情報