やりたいことは、画像スライドショー(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: "◀", 7nextText: "▶", 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});
回答1件
あなたの回答
tips
プレビュー