前提・実現したいこと
JavaScriptで複数の画像がゆっくりと流れるループスライダー実装し、条件に合うデータベースに入っている複数の画像を検索で出て来た件数分ループスライダーが機能するようにしました。
しかし、検索して出たページを開くと、止まることが多く、そのページを更新すると正常にループスライダーが機能するようになります。
最初にページを開いた時から通常に動くようにしたいです。
該当のソースコード
javascript
1 $(function(){ 2 $('.loopslider').each(function(){ 3 var loopsliderWidth = $(this).width(); 4 var loopsliderHeight = $(this).height(); 5 $(this).children('ul').wrapAll('<div class="loopslider_wrap"></div>'); 6 7 var loopWidth = 0; 8 $(this).find('ul li').each(function(){ 9 loopWidth += $(this).width() + 2; 10 }) 11 loopWidth += 1; 12 13 $('.loopslider_wrap').css({ 14 top: '0', 15 left: '0', 16 width: ((loopWidth) * 2), 17 height: (loopsliderHeight), 18 overflow: 'hidden', 19 position: 'absolute' 20 }); 21 22 var $_ = $(this).find('.loopslider_wrap'); 23 24 $(this).find('.loopslider_wrap').css({ 25 width: (loopWidth) 26 }); 27 loopsliderPosition(); 28 29 function loopsliderPosition(){ 30 $_.css({left:'0'}); 31 $_.stop().animate({left:'-' + (loopWidth) + 'px'},30000,'linear'); 32 setTimeout(function(){ 33 loopsliderPosition(); 34 },30000); 35 }; 36 37 $(this).find('ul').clone().appendTo($_); 38 39 }); 40});
###該当のCSS
CSS
1 .loopslider { 2 margin: 0 auto; 3 width: 230px; 4 height: 200px; 5 text-align: center; 6 position: relative; 7 overflow: hidden; 8 } 9 10 .loopslider ul { 11 height: 180px; 12 float: left; 13 display: inline; 14 overflow: hidden; 15 } 16 17 .loopslider ul li { 18 width: auto; 19 float: left; 20 display: inline; 21 overflow: hidden; 22 padding-top: 30px; 23 padding-right: 2px; 24 }
補足情報(FW/ツールのバージョンなど)
プログラミングを初めて半年足らずで、わからないことが多いですが、ご教授いただけると幸いです。
よろしくお願いします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/03/13 16:01