質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

2427閲覧

画像スライドショーにて、表示されている要素二つをフェードで切り替えてから次のスライドに飛ぶようにしたい

southern_flavor

総合スコア70

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

1グッド

0クリップ

投稿2016/01/27 08:10

編集2016/01/27 12:51

やりたいことは、画像スライドショー(bxslierを使用)にて、表示されている二つの要素があり、それをhoge1→hoge2とフェードで切り替えてから、次のスライドへいき、その後hoge3→hoge4を同じようにフェード切り替えしてループするというようなことをしたいです。

つまりはこういうことです。

スライド開始
hoge1表示→フェードしながら、hoge2が表示

次のスライドへ
hoge3表示→フェードしながら、hoge4が表示

最初のスライドへ戻る

bxslierのコールバックを使用していますが、どうもうまくいきません。
(特にhoge3→hoge4の切り替えのところ)

作成中のコードを貼りますが、誤っている箇所等ありましたら、ご指摘とご教授をお願いいたします。
下記のコードをそのままコピペで現状を確認いただけます。

長くなってしまい、申し訳ございません。

html

1<!doctype html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script> 6<script type="text/javascript" src="http://bxslider.com/lib/jquery.bxslider.js"></script> 7<title></title> 8</head> 9<body> 10<div id="slider"> 11<ul class="fade1"> 12<ul> 13<li>hoge1</li> 14<li>hoge2</li> 15</ul> 16</ul> 17<div class="fade2"> 18<ul> 19<li>hoge3</li> 20<li>hoge4</li> 21</ul> 22</div> 23</div> 24</body> 25</html>

css

1.fade1, 2.fade2 { 3position: absolute; 4width:200px; 5height:100px; 6} 7.fade1 li, 8.fade2 li { 9font-size: 20px; 10overflow: hidden; 11position: relative; 12display:block; 13}

JavaScript

1$(document).ready(function(){ 2"use strict"; 3$("#slider").bxSlider({ 4auto: true, 5pause: 6000, 6prevText: "&#9664;", 7nextText: "&#9654;", 8speed: 1000, 9controls: true, 10pager:false, 11onSliderLoad: function(currentIndex) { 12var count=1; 13 14$(function () { 15setTimeout(init,0); 16}); 17 18function init(){ 19animeloop(); 20} 21 22function animeloop(){ 23if(!count){ 24return; 25} 26sampleText1(); 27setTimeout(animeloop,10000); 28 29count--; 30} 31 32function sampleText1() { 33$('.fade1').css({"opacity":"0"}).delay(1000) 34.animate({opacity:"1"}, 35{complete: 36$(function(){ 37var $width =200; // 横幅 38var $height =100; // 高さ 39var $interval = 3000; // 切り替わりの間隔(ミリ秒) 40var $fade_speed = 1000; // フェード処理の早さ(ミリ秒) 41 42// 設定 43$(".fade1 li").css({"position":"absolute","overflow":"hidden","width":$width,"height":$height}); 44$(".fade1 li").hide().css({"position":"absolute","top":0,"left":0}); 45$(".fade1 li:first").addClass("active").show(); 46 47setTimeout(function(){ 48var $active = $(".fade1 li.active"); 49var $next = $active.next(".fade1 li").length?$active.next(".fade1 li"):$(".fade1 li:first"); 50$active.fadeOut($fade_speed).removeClass("active"); 51$next.fadeIn($fade_speed).addClass("active"); 52},$interval); 53}) 54}); 55} 56 57}, 58onSlideBefore: function($slideElement, oldIndex, newIndex) { 59 60var count=1; 61 62$(function () { 63setTimeout(init,0); 64}); 65 66function init(){ 67animeLoop(); 68} 69 70function animeLoop(){ 71if(!count){ 72return; 73} 74sampleText1(); 75sampleText2(); 76setTimeout(animeLoop,10000); 77 78count--; 79} 80 81function sampleText1() { 82$('.fade1').css({"opacity":"0"}).delay(1000) 83.animate({opacity:"1"}, 84{complete: 85function(){ 86var $width =200; // 横幅 87var $height =100; // 高さ 88var $interval = 3000; // 切り替わりの間隔(ミリ秒) 89var $fade_speed = 1000; // フェード処理の早さ(ミリ秒) 90 91// 設定 92$(".fade1 li").css({"position":"absolute","overflow":"hidden","width":$width,"height":$height}); 93$(".fade1 li").hide().css({"position":"absolute","top":0,"left":0}); 94$(".fade1 li:first").addClass("active").show(); 95 96setTimeout(function(){ 97var $active = $(".fade1 li.active"); 98var $next = $active.next(".fade1 li").length?$active.next(".fade1 li"):$(".fade1 li:first"); 99 100$active.fadeOut($fade_speed).removeClass("active"); 101$next.fadeIn($fade_speed).addClass("active"); 102},$interval); 103} 104}); 105} 106 107function sampleText2() { 108$('.fade2 ul').css({"opacity":"0"}).delay(1000) 109.animate({opacity:"1"}, 110{complete: 111function(){ 112var $width1 =200; // 横幅 113var $height1 =100; // 高さ 114var $interval1 = 3000; // 切り替わりの間隔(ミリ秒) 115var $fade_speed1 = 1000; // フェード処理の早さ(ミリ秒) 116 117// 設定 118$(".fade2 li").css({"position":"absolute","overflow":"hidden","width":$width1,"height":$height1}); 119$(".fade2 li").hide().css({"position":"absolute","top":0,"left":0}); 120$(".fade2 li:first").addClass("active").show(); 121 122setTimeout(function(){ 123var $active1 = $(".fade2 li.active"); 124var $next1 = $active1.next(".fade2 li").length?$active1.next(".fade2 li"):$(".fade2 li:first"); 125 126$active1.fadeOut($fade_speed1).removeClass("active"); 127$next1.fadeIn($fade_speed1).addClass("active"); 128},$interval1); 129} 130}); 131} 132} 133}); 134});
5o5o_wagon👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

5o5o_wagon

2016/01/27 12:21

html、css、js等を分けた上でそれぞれコード部分を```で囲っていただけると見やすくなり回答がつきやすくなると思います。
southern_flavor

2016/01/27 12:53

ご指摘ありがとうございます。コード部分を```で囲いました。よろしくお願いいたします。
guest

回答1

0

ベストアンサー

htmlとcssは正しいですがjavascriptは書き直してあげた

javascript

1$('#slider').bxSlider({ 2 prevText: "&#9664;", 3 nextText: "&#9654;", 4 speed: 1000, 5 controls: true, 6 pager:false, 7 onSliderLoad: function() { anim($('#slider .fade1')); }, 8 onSlideBefore: function(e) { e.find("li:eq(0)").show(); e.find("li:eq(1)").hide(); }, 9 onSlideAfter: function(e) { anim(e); } 10}) 11.startAuto(); 12 13function anim(e){ 14 e.find("li:eq(0)").fadeOut(1000); 15 e.find("li:eq(1)").delay(1100).fadeIn(1000); 16}

投稿2016/01/28 03:41

ToniVaquer

総合スコア146

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

southern_flavor

2016/01/28 11:35

こんな短くて良かったんですね。参考にします。 最初のところですぐフェードアウトをしてしまうところが気になりましたが、、、ご回答ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問