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

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

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

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

813閲覧

JavaScriptで複数のループスライダーが全部止まってしまう現象を解消したい

m.shinji

総合スコア20

JavaScript

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

3クリップ

投稿2019/03/13 09:31

編集2019/03/13 15:59

前提・実現したいこと

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/ツールのバージョンなど)

プログラミングを初めて半年足らずで、わからないことが多いですが、ご教授いただけると幸いです。
よろしくお願いします。

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

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

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

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

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

guest

回答1

0

ベストアンサー

画像を読み込み完了前にJSが走ってしまうため、画像の横幅が正常に取得できていないのではないでしょうか?
以下のようにして、正しく動作するようになりませんかね?

js

1$(function(){ 2(略) 3});

js

1$(window).on('load', function () { 2(略) 3});

投稿2019/03/13 09:43

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

m.shinji

2019/03/13 16:01

出来ました! やり方がわからなくて本当に困っていたので、とても助かりました。 ありがとうございます!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問