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

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

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

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

jQuery

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

Q&A

1回答

2884閲覧

【javascript】PC・スマホで別の画像を使用したスライドショー

na7_k

総合スコア8

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2017/02/19 18:14

###前提・実現したいこと
JavascriptでPCサイト向けにスライドショーを作成しています。
そのスライドショーをスマホ用に変更したいと考えています。

###発生している問題
画像名を.replaceで「PC用」⇔「スマホ用」に切り替える、という方法にしてみたのですが、スマホ用の画像が全て1枚目の画像名になってしまいます。

イメージとしては、PC表示では

PC用1→PC用2、PC用3、PC用4、PC用5、PC用1、…

となるのですが、スマホ表示では

スマホ用1→スマホ用1→スマホ用1→…

となってしまうのです。

初学者ゆえ、何が起こっているのかさっぱりわからず困っています。
ご教示いただければ幸いです。。

###該当のソースコード

HTML

1<div id="slideshow" class="toppage"> 2 <ul> 3 <li><img src="images/show/01_l.png"></li> 4 <li><img src="images/show/02_l.png"></li> 5 <li><img src="images/show/03_l.png"></li> 6 <li><img src="images/show/04_l.png"></li> 7 <li><img src="images/show/05_l.png"></li> 8 </ul> 9</div>

Javascript

1// スマホ対応部分 2var windowWidth = $(window).width(); 3var windowSm = 500; 4if ( windowWidth <= windowSm && $("#slideshow").hasClass("toppage") ){ 5 $("#slideshow ul li img").attr("src",$("#slideshow ul li img").attr("src").replace("_l", "_s") ); 6 $("#slideshow").css("width", "100%").css("height","200px"); 7} 8 9//スライドショー部分 10setInterval(function(){ 11 var $active = $("#slideshow ul li.active"); 12 var $next = $active.next().length > 0 13 ? $active.next() 14 : $("#slideshow ul li:first"); 15 $next.addClass("next").css({opacity:0}).animate({opacity:1}, 1000, function(){ 16 $active.removeClass("active"); 17 $next.removeClass("next").addClass("active"); 18 }); 19},4500);

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

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

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

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

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

guest

回答1

0

要素すべてに処理をしたいときは、each()が使えます。
console.logの部分は確認用ですので、本番では削除してください。

$(function (){ $("#slideshow ul li img").each(function(){ console.log("before : " + $(this).attr("src")); $(this).attr("src",$(this).attr("src").replace("_l", "_s") ) ; console.log("after : " + $(this).attr("src")); }); })

投稿2017/02/20 00:03

namimon

総合スコア726

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問