###前提・実現したいこと
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);
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。