トップのイメージをスライドショーにしたい。
1.スマホの横スクロールを消すため、jQueryの数値を画像サイズに変更すると、横揺れは解消されたが、デスクトップで表示した際、スライドショーの画像の右半分が表示されなくたった。 2.テストサイトを見た後、他のサイトから戻ると、スライドショーの画像が一瞬ぐしゃっと、一度に表示される。(ほぼ全ての環境で)
該当のソースコード
html
1<script type="text/javascript"> 2 $(window).load(function() { 3 $('slid ul li').fadeIn(10000);}); 4</script> 5<!--CSSで非表示にした.slideをフェードインで表示--> 6 7 <div class="slide"> 8 <ul> 9 <li><a><img src="images/ribbon_pumps_590_autoline.svg" alt="リボンパンプスと590のイラスト" height="600" width="800" /></a></li> 10 <li><a><img src="images/Do_you_feel_autoline.svg" alt="Do you feel?" width="800" height="600" /></a></li> 11 <li><a><img src="images/pumps_76219_autoline.svg" alt="ミュールと76219のイラスト" width="800" height="600" /></a></li> 12 <li><a><img src="images/Is_it_beautiful_autoline.svg" alt="Is it beautiful?" width="800" height="600" /></a></li> 13 <li><a><img src="images/mule_76075_autoline.svg" alt="と76075のイラスト" width="800" height="600" /></a></li> 14 <li><a><img src="images/Is_it_fun_autoline.svg" alt="Is it fun?" width="800" height="600" /></a></li> 15 <li><a><img src="images/ribbon_pumps_590_autoline.svg" alt="リボンパンプスと590のイラスト" width="800" height="600" /></a></li> 16 <li><a><img src="images/Is_it_real_autoline.svg" alt="Is it real?" width="800" height="600" /></a></li> 17 <li><a><img src="images/christina_autoline.svg" alt="クリスティーナ" width="800" height="600" /></a></li> 18 </ul> 19 </div> 20```→ 普通に読み込むと非表示になりますが、そのサイトを見た後、他のサイトを見て戻ると、スライドショーの画像が一瞬ぐしゃっと、一度に表示される。(ほぼ全ての環境で) 21 22 23```CSS 24img 25{width: 100vw; /*for RWD*/ 26 margin: auto; 27 padding:50px 0 50px 0;} 28 29body 30{margin: 0; 31 text-align: center;} 32 33.slide 34{width:100%; 35height: 660px; 36margin: 50px auto; 37position:relative;} 38 39.slide img 40{position:absolute; 41left:0; 42top:0;} 43 44.slide ul li 45{display: none;} 46 47 48```→ レスポンシブは問題ないのですが、スライドショーの画像の右半分が表示されなくたった。 49→ .sideのheight:660pxをautoにすると画像が表示されなくなります。 50 51 52```JavaScript 53//画像がフェードイン・フェードアウトで切り替わるシンプルなスライドショー 54$(function(){ 55var $width =980; // 横幅 56var $height =660; // 高さ 57var $interval = 7000; // 切り替わりの間隔(ミリ秒) 58var $fade_speed = 7000; // フェード処理の早さ(ミリ秒) 59$(".slide ul li").css({"position":"relative","overflow":"hidden","width":$width,"height":$height}); 60$(".slide ul li").hide().css({"position":"absolute","top":0,"left":0}); 61$(".slide ul li:first").addClass("active").show(); 62setInterval(function(){ 63var $active = $(".slide ul li.active"); 64var $next = $active.next("li").length?$active.next("li"):$(".slide ul li:first"); 65$active.fadeOut($fade_speed).removeClass("active"); 66$next.fadeIn($fade_speed).addClass("active"); 67},$interval); 68}); 69```→ スマホの横スクロールを消すため、Javascriptの数値を画像サイズに変更すると、横揺れは解消されたが、 70デスクトップで表示した際、スライドショーの画像の右半分が表示されなくたった。 71 72初めてホームページを作ります。 73検索しまくっても、どうしても解決しないので、よろしくお願いしますm(__)m
回答2件
あなたの回答
tips
プレビュー