質問編集履歴

3 コードと一部文章修正

southern_flavor

southern_flavor score 70

2016/01/27 21:51  投稿

画像スライドショーにて、表示されている要素二つをフェードで切り替えてから次のスライドに飛ぶようにしたい
やりたいことは、画像スライドショー(bxslierを使用)にて、表示されている二つの要素があり、それをhoge1→hoge2とフェードで切り替えてから、次のスライドへいき、その後hoge3→hoge4を同じようにフェード切り替えしてループするというようなことをしたいです。
つまりはこういうことです。  
 
スライド開始  
hoge1表示→フェードしながら、hoge2が表示  
 
次のスライドへ  
hoge3表示→フェードしながら、hoge4が表示  
 
最初のスライドへ戻る  
 
bxslierのコールバックを使用していますが、どうもうまくいきません。
(特にhoge3→hoge4の切り替えが、、)
(特にhoge3→hoge4の切り替えのところ)
作成中のコードを貼りますが、誤っている箇所等ありましたら、ご指摘とご教授をお願いいたします。
下記のコードをそのままコピペで現状を確認いただけます。  
長くなってしまい、申し訳ございません。
```html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<title></title>
</head>
<body>
<div id="slider">
<ul class="fade1">
<ul>
<li>hoge1</li>
<li>hoge2</li>
</ul>
</ul>
<div class="fade2">
<ul>
<li>hoge3</li>
<li>hoge4</li>
</ul>
</div>
</div>
</body>
</html>
```
```css
.fade1,
.fade2 {
position: absolute;
width:200px;
height:100px;
}
.fade1 li,
.fade2 li {
font-size: 20px;
overflow: hidden;
position: relative;
display:block;
}
```
'''JavaScript
```JavaScript
$(document).ready(function(){
"use strict";
$("#slider").bxSlider({
auto: true,
pause: 6000,
prevText: "&#9664;",
nextText: "&#9654;",
speed: 1000,
controls: true,
pager:false,
onSliderLoad: function(currentIndex) {
var count=1;
$(function () {
setTimeout(init,0);
});
function init(){
animeloop();
}
function animeloop(){
if(!count){
return;
}
sampleText1();
setTimeout(animeloop,10000);
count--;
}
function sampleText1() {
$('.fade1').css({"opacity":"0"}).delay(1000)
.animate({opacity:"1"},
{complete:
$(function(){
var $width =200; // 横幅
var $height =100; // 高さ
var $interval = 3000; // 切り替わりの間隔(ミリ秒)
var $fade_speed = 1000; // フェード処理の早さ(ミリ秒)
// 設定
$(".fade1 li").css({"position":"absolute","overflow":"hidden","width":$width,"height":$height});
$(".fade1 li").hide().css({"position":"absolute","top":0,"left":0});
$(".fade1 li:first").addClass("active").show();
setTimeout(function(){
var $active = $(".fade1 li.active");
var $next = $active.next(".fade1 li").length?$active.next(".fade1 li"):$(".fade1 li:first");
$active.fadeOut($fade_speed).removeClass("active");
$next.fadeIn($fade_speed).addClass("active");
},$interval);
})
});
}
},
onSlideBefore: function($slideElement, oldIndex, newIndex) {   
var count=1;
$(function () {
setTimeout(init,0);
});
function init(){
animeLoop();
}
function animeLoop(){
if(!count){
return;
}
sampleText1();
sampleText2();
setTimeout(animeLoop,10000);
count--;
}
function sampleText1() {
$('.fade1').css({"opacity":"0"}).delay(1000)
.animate({opacity:"1"},
{complete:
function(){
var $width =200; // 横幅
var $height =100; // 高さ
var $interval = 3000; // 切り替わりの間隔(ミリ秒)
var $fade_speed = 1000; // フェード処理の早さ(ミリ秒)
// 設定
$(".fade1 li").css({"position":"absolute","overflow":"hidden","width":$width,"height":$height});
$(".fade1 li").hide().css({"position":"absolute","top":0,"left":0});
$(".fade1 li:first").addClass("active").show();
setTimeout(function(){
var $active = $(".fade1 li.active");
var $next = $active.next(".fade1 li").length?$active.next(".fade1 li"):$(".fade1 li:first");
$active.fadeOut($fade_speed).removeClass("active");
$next.fadeIn($fade_speed).addClass("active");
},$interval);
}
});
}
function sampleText2() {
$('.fade2 ul').css({"opacity":"0"}).delay(1000)
.animate({opacity:"1"},
{complete:
function(){
var $width1 =200; // 横幅
var $height1 =100; // 高さ
var $interval1 = 3000; // 切り替わりの間隔(ミリ秒)
var $fade_speed1 = 1000; // フェード処理の早さ(ミリ秒)
// 設定
$(".fade2 li").css({"position":"absolute","overflow":"hidden","width":$width1,"height":$height1});
$(".fade2 li").hide().css({"position":"absolute","top":0,"left":0});
$(".fade2 li:first").addClass("active").show();
setTimeout(function(){
var $active1 = $(".fade2 li.active");
var $next1 = $active1.next(".fade2 li").length?$active1.next(".fade2 li"):$(".fade2 li:first");
$active1.fadeOut($fade_speed1).removeClass("active");
$next1.fadeIn($fade_speed1).addClass("active");
},$interval1);
}
});
}
}
});   
});
```
  • JavaScript

    38578 questions

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

  • jQuery

    13559 questions

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

  • HTML5

    10472 questions

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

  • jQueryプラグイン

    839 questions

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

2 コードの修正

southern_flavor

southern_flavor score 70

2016/01/27 21:45  投稿

画像スライドショーにて、表示されている要素二つをフェードで切り替えてから次のスライドに飛ぶようにしたい
やりたいことは、画像スライドショー(bxslierを使用)にて、表示されている二つの要素があり、それをhoge1→hoge2とフェードで切り替えてから、次のスライドへいき、その後hoge3→hoge4を同じようにフェード切り替えしてループするというようなことをしたいです。
bxslierのコールバックを使用していますが、どうもうまくいきません。
(特にhoge3→hoge4の切り替えが、、)
作成中のコードを貼りますが、誤っている箇所等ありましたら、ご指摘とご教授をお願いいたします。
長くなってしまい、申し訳ございません。
```html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<title></title>
</head>
<body>
<div id="slider">
<ul class="fade1">
<ul>
<li>hoge1</li>
<li>hoge2</li>
</ul>
</ul>
<div class="fade2">
<ul>
<li>hoge3</li>
<li>hoge4</li>
</ul>
</div>
</div>
</body>
</html>
```
```css
.fade1,
.fade2 {
position: absolute;
width:200px;
height:100px;
}
.fade1 li,
.fade2 li {
font-size: 20px;
overflow: hidden;
position: relative;
display:block;
}
```
'''Javascript
'''JavaScript
$(document).ready(function(){
"use strict";
$("#slider").bxSlider({
auto: true,
pause: 6000,
prevText: "&#9664;",
nextText: "&#9654;",
speed: 1000,
controls: true,
pager:false,
onSliderLoad: function(currentIndex) {
var count=1;
$(function () {
setTimeout(init,0);
});
function init(){
animeloop();
}
function animeloop(){
if(!count){
return;
}
sampleText1();
setTimeout(animeloop,10000);
count--;
}
function sampleText1() {
$('.fade1').css({"opacity":"0"}).delay(1000)
.animate({opacity:"1"},
{complete:
$(function(){
var $width =200; // 横幅
var $height =100; // 高さ
var $interval = 3000; // 切り替わりの間隔(ミリ秒)
var $fade_speed = 1000; // フェード処理の早さ(ミリ秒)
// 設定
$(".fade1 li").css({"position":"absolute","overflow":"hidden","width":$width,"height":$height});
$(".fade1 li").hide().css({"position":"absolute","top":0,"left":0});
$(".fade1 li:first").addClass("active").show();
setTimeout(function(){
var $active = $(".fade1 li.active");
var $next = $active.next(".fade1 li").length?$active.next(".fade1 li"):$(".fade1 li:first");
$active.fadeOut($fade_speed).removeClass("active");
$next.fadeIn($fade_speed).addClass("active");
},$interval);
})
});
}
},
onSlideBefore: function($slideElement, oldIndex, newIndex) {   
var count=1;
$(function () {
setTimeout(init,0);
});
function init(){
animeLoop();
}
function animeLoop(){
if(!count){
return;
}
sampleText1();
sampleText2();
setTimeout(animeLoop,10000);
count--;
}
function sampleText1() {
$('.fade1').css({"opacity":"0"}).delay(1000)
.animate({opacity:"1"},
{complete:
function(){
var $width =200; // 横幅
var $height =100; // 高さ
var $interval = 3000; // 切り替わりの間隔(ミリ秒)
var $fade_speed = 1000; // フェード処理の早さ(ミリ秒)
// 設定
$(".fade1 li").css({"position":"absolute","overflow":"hidden","width":$width,"height":$height});
$(".fade1 li").hide().css({"position":"absolute","top":0,"left":0});
$(".fade1 li:first").addClass("active").show();
setTimeout(function(){
var $active = $(".fade1 li.active");
var $next = $active.next(".fade1 li").length?$active.next(".fade1 li"):$(".fade1 li:first");
$active.fadeOut($fade_speed).removeClass("active");
$next.fadeIn($fade_speed).addClass("active");
},$interval);
}
});
}
function sampleText2() {
$('.fade2 ul').css({"opacity":"0"}).delay(1000)
.animate({opacity:"1"},
{complete:
function(){
var $width1 =200; // 横幅
var $height1 =100; // 高さ
var $interval1 = 3000; // 切り替わりの間隔(ミリ秒)
var $fade_speed1 = 1000; // フェード処理の早さ(ミリ秒)
// 設定
$(".fade2 li").css({"position":"absolute","overflow":"hidden","width":$width1,"height":$height1});
$(".fade2 li").hide().css({"position":"absolute","top":0,"left":0});
$(".fade2 li:first").addClass("active").show();
setTimeout(function(){
var $active1 = $(".fade2 li.active");
var $next1 = $active1.next(".fade2 li").length?$active1.next(".fade2 li"):$(".fade2 li:first");
$active1.fadeOut($fade_speed1).removeClass("active");
$next1.fadeIn($fade_speed1).addClass("active");
},$interval1);
}
});
}
}
});   
});
```
  • JavaScript

    38578 questions

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

  • jQuery

    13559 questions

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

  • HTML5

    10472 questions

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

  • jQueryプラグイン

    839 questions

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

1 サンプルコード部分の修正

southern_flavor

southern_flavor score 70

2016/01/27 21:45  投稿

画像スライドショーにて、表示されている要素二つをフェードで切り替えてから次のスライドに飛ぶようにしたい
やりたいことは、画像スライドショー(bxslierを使用)にて、表示されている二つの要素があり、それをhoge1→hoge2とフェードで切り替えてから、次のスライドへいき、その後hoge3→hoge4を同じようにフェード切り替えしてループするというようなことをしたいです。
bxslierのコールバックを使用していますが、どうもうまくいきません。
(特にhoge3→hoge4の切り替えが、、)
作成中のコードを貼りますが、誤っている箇所等ありましたら、ご指摘とご教授をお願いいたします。
長くなってしまい、申し訳ございません。
```html  
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<style>
<title></title>
</head>
<body>
<div id="slider">
<ul class="fade1">
<ul>
<li>hoge1</li>
<li>hoge2</li>
</ul>
</ul>
<div class="fade2">
<ul>
<li>hoge3</li>
<li>hoge4</li>
</ul>
</div>
</div>
</body>
</html>
```
```css
.fade1,
.fade2 {
position: absolute;
width:200px;
height:100px;
}
.fade1 li,
.fade2 li {
font-size: 20px;
overflow: hidden;
position: relative;
display:block;
}
</style>
<script>
```
'''Javascript
$(document).ready(function(){
"use strict";
$("#slider").bxSlider({
auto: true,
pause: 6000,
prevText: "&#9664;",
nextText: "&#9654;",
speed: 1000,
controls: true,
pager:false,
onSliderLoad: function(currentIndex) {
var count=1;
$(function () {
setTimeout(init,0);
});
function init(){
animeloop();
}
function animeloop(){
if(!count){
return;
}
sampleText1();
setTimeout(animeloop,10000);
count--;
}
function sampleText1() {
$('.fade1').css({"opacity":"0"}).delay(1000)
.animate({opacity:"1"},
{complete:
$(function(){
var $width =200; // 横幅
var $height =100; // 高さ
var $interval = 3000; // 切り替わりの間隔(ミリ秒)
var $fade_speed = 1000; // フェード処理の早さ(ミリ秒)
// 設定
$(".fade1 li").css({"position":"absolute","overflow":"hidden","width":$width,"height":$height});
$(".fade1 li").hide().css({"position":"absolute","top":0,"left":0});
$(".fade1 li:first").addClass("active").show();
setTimeout(function(){
var $active = $(".fade1 li.active");
var $next = $active.next(".fade1 li").length?$active.next(".fade1 li"):$(".fade1 li:first");
$active.fadeOut($fade_speed).removeClass("active");
$next.fadeIn($fade_speed).addClass("active");
},$interval);
})
});
}
},
onSlideBefore: function($slideElement, oldIndex, newIndex) {   
var count=1;
$(function () {
setTimeout(init,0);
});
function init(){
animeLoop();
}
function animeLoop(){
if(!count){
return;
}
sampleText1();
sampleText2();
setTimeout(animeLoop,10000);
count--;
}
function sampleText1() {
$('.fade1').css({"opacity":"0"}).delay(1000)
.animate({opacity:"1"},
{complete:
function(){
var $width =200; // 横幅
var $height =100; // 高さ
var $interval = 3000; // 切り替わりの間隔(ミリ秒)
var $fade_speed = 1000; // フェード処理の早さ(ミリ秒)
// 設定
$(".fade1 li").css({"position":"absolute","overflow":"hidden","width":$width,"height":$height});
$(".fade1 li").hide().css({"position":"absolute","top":0,"left":0});
$(".fade1 li:first").addClass("active").show();
setTimeout(function(){
var $active = $(".fade1 li.active");
var $next = $active.next(".fade1 li").length?$active.next(".fade1 li"):$(".fade1 li:first");
$active.fadeOut($fade_speed).removeClass("active");
$next.fadeIn($fade_speed).addClass("active");
},$interval);
}
});
}
function sampleText2() {
$('.fade2 ul').css({"opacity":"0"}).delay(1000)
.animate({opacity:"1"},
{complete:
function(){
var $width1 =200; // 横幅
var $height1 =100; // 高さ
var $interval1 = 3000; // 切り替わりの間隔(ミリ秒)
var $fade_speed1 = 1000; // フェード処理の早さ(ミリ秒)
// 設定
$(".fade2 li").css({"position":"absolute","overflow":"hidden","width":$width1,"height":$height1});
$(".fade2 li").hide().css({"position":"absolute","top":0,"left":0});
$(".fade2 li:first").addClass("active").show();
setTimeout(function(){
var $active1 = $(".fade2 li.active");
var $next1 = $active1.next(".fade2 li").length?$active1.next(".fade2 li"):$(".fade2 li:first");
$active1.fadeOut($fade_speed1).removeClass("active");
$next1.fadeIn($fade_speed1).addClass("active");
},$interval1);
}
});
}
}
});   
});
</script>
<title></title>
</head>
<body>
<div id="slider">
<ul class="fade1">
<ul>
<li>hoge1</li>
<li>hoge2</li>
</ul>
</ul>
<div class="fade2">
<ul>
<li>hoge3</li>
<li>hoge4</li>
</ul>
</div>
</div>
</body>
</html>
```
  • JavaScript

    38578 questions

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

  • jQuery

    13559 questions

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

  • HTML5

    10472 questions

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

  • jQueryプラグイン

    839 questions

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

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る