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

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

ただいまの
回答率

87.50%

初めて質問します。スライドショーの画像の右半分が表示されない原因が分かりません!

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,087

score 7

トップのイメージをスライドショーにしたい。

1.スマホの横スクロールを消すため、jQueryの数値を画像サイズに変更すると、横揺れは解消されたが、デスクトップで表示した際、スライドショーの画像の右半分が表示されなくたった。
2.テストサイトを見た後、他のサイトから戻ると、スライドショーの画像が一瞬ぐしゃっと、一度に表示される。(ほぼ全ての環境で)

 該当のソースコード

<script type="text/javascript">
    $(window).load(function() {
    $('slid ul li').fadeIn(10000);});
</script>
<!--CSSで非表示にした.slideをフェードインで表示-->

  <div class="slide">
   <ul>
    <li><a><img src="images/ribbon_pumps_590_autoline.svg" alt="リボンパンプスと590のイラスト" height="600" width="800" /></a></li>
    <li><a><img src="images/Do_you_feel_autoline.svg" alt="Do you feel?" width="800" height="600" /></a></li>
    <li><a><img src="images/pumps_76219_autoline.svg" alt="ミュールと76219のイラスト" width="800" height="600" /></a></li>
   <li><a><img src="images/Is_it_beautiful_autoline.svg" alt="Is it beautiful?" width="800" height="600" /></a></li>
    <li><a><img src="images/mule_76075_autoline.svg" alt="と76075のイラスト" width="800" height="600" /></a></li>
    <li><a><img src="images/Is_it_fun_autoline.svg" alt="Is it fun?" width="800" height="600" /></a></li>
    <li><a><img src="images/ribbon_pumps_590_autoline.svg" alt="リボンパンプスと590のイラスト" width="800" height="600" /></a></li>
    <li><a><img src="images/Is_it_real_autoline.svg" alt="Is it real?" width="800" height="600" /></a></li>
    <li><a><img src="images/christina_autoline.svg" alt="クリスティーナ" width="800" height="600" /></a></li>            
   </ul>
  </div>

→ 普通に読み込むと非表示になりますが、そのサイトを見た後、他のサイトを見て戻ると、スライドショーの画像が一瞬ぐしゃっと、一度に表示される。(ほぼ全ての環境で)

img
{width: 100vw; /*for RWD*/
 margin: auto;
 padding:50px 0 50px 0;}

body
{margin:  0;
 text-align: center;}

.slide 
{width:100%;
height: 660px;
margin: 50px auto;
position:relative;}

.slide img 
{position:absolute;
left:0;
top:0;}

.slide ul li
{display: none;}

→ レスポンシブは問題ないのですが、スライドショーの画像の右半分が表示されなくたった。
→ .sideのheight:660pxをautoにすると画像が表示されなくなります。

//画像がフェードイン・フェードアウトで切り替わるシンプルなスライドショー
$(function(){
var $width =980; // 横幅
var $height =660; // 高さ
var $interval = 7000; // 切り替わりの間隔(ミリ秒)
var $fade_speed = 7000; // フェード処理の早さ(ミリ秒)
$(".slide ul li").css({"position":"relative","overflow":"hidden","width":$width,"height":$height});
$(".slide ul li").hide().css({"position":"absolute","top":0,"left":0});
$(".slide ul li:first").addClass("active").show();
setInterval(function(){
var $active = $(".slide ul li.active");
var $next = $active.next("li").length?$active.next("li"):$(".slide ul li:first");
$active.fadeOut($fade_speed).removeClass("active");
$next.fadeIn($fade_speed).addClass("active");
},$interval);
});

→ スマホの横スクロールを消すため、Javascriptの数値を画像サイズに変更すると、横揺れは解消されたが、
デスクトップで表示した際、スライドショーの画像の右半分が表示されなくたった。

初めてホームページを作ります。
検索しまくっても、どうしても解決しないので、よろしくお願いしますm(__)m

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • defghi1977

    2018/03/28 16:18

    1について, windows版safariは既にサポートが切れており, セキュリティ上の懸念から利用は避けるべきです. また、機能的にも既に数世代前のものとなっており, windows版safariにこだわる必要はないと思います.

    キャンセル

  • t_r_u_r_

    2018/03/28 16:35

    早速の回答ありがとうございます! では、windows版safariで問題が出るのは仕方ないのですね。ホッとしました(*'▽')。質問再編集して投稿させていただきました。ありがとうございます。

    キャンセル

  • m.ts10806

    2018/03/28 16:37

    タグのsafariにはどのような意図が?確認されているのはiPhoneでしょうかAndroidでしょうか?また「検索しまくった」結果も質問に追記してください。もしかしたら解釈や導入の仕方が間違っているかもしれませんし、提示された情報以外で解決方法を回答者が提案できるからです。

    キャンセル

  • t_r_u_r_

    2018/03/28 17:35

    編集前に、windows版safariの問題を質問してたので、タグ消し忘れてました。(windows版safariはサポート終了したと回答頂いたので)確認は、windows/chrome,,Firefox,IE、mac/chrome,safari,Firefox,IE、iPhone/chrome,safari,Firefoxです。

    キャンセル

回答 2

checkベストアンサー

+2

1.スマホの横スクロールを消すため、jQueryの数値を画像サイズに変更すると、横揺れは解消されたが、デスクトップで表示した際、スライドショーの画像の右半分が表示されなくたった。

スライドショー画像を特定の領域にフィットさせるだけであればCSSのobject-fit:contain;(及びobject-positionプロパティ)で制御できます.

.slide{
  width:100%;
  height: 660px;
  position: relative;
}
.slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  vertical-align: bottom;
}


参考
https://developer.mozilla.org/ja/docs/Web/CSS/object-fit

2.テストサイトを見た後、他のサイトから戻ると、スライドショーの画像が一瞬ぐしゃっと、一度に表示される。(ほぼ全ての環境で)

setIntervalメソッドで予約された処理はタブにフォーカスがあろうとなかろうと容赦なく定期的に実行されます. 一方, アニメーションの実行には(実装にもよりますが)タブにフォーカスが当たっている必要があり, そうでなかった場合は処理キューに積み残されていきます. そのため, 別のタブを見てから元のタブに戻るとこの処理の積み残しが一度に「ぐしゃっ」と実行されるのです.
※これは推測です.

であれば答えは簡単で, documentにフォーカスが存在している時に限りスライドの切り替えを行えば問題の発生頻度が下がるはずです.

//画像がフェードイン・フェードアウトで切り替わるシンプルなスライドショー
$(function(){
  var $width =980; // 横幅
  var $height =660; // 高さ
  var $interval = 7000; // 切り替わりの間隔(ミリ秒)
  var $fade_speed = 7000; // フェード処理の早さ(ミリ秒)
  $(".slide ul li").css({"position":"relative","overflow":"hidden","width":$width,"height":$height});
  $(".slide ul li").hide().css({"position":"absolute","top":0,"left":0});
  $(".slide ul li:first").addClass("active").show();
  setInterval(function(){
    if(!document.hasFocus()){return;}//フォーカスが無かったら処理しない
    var $active = $(".slide ul li.active");
    var $next = $active.next("li").length?$active.next("li"):$(".slide ul li:first");
    $active.fadeOut($fade_speed).removeClass("active");
    $next.fadeIn($fade_speed).addClass("active");
  },$interval);
});

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/03/28 17:39

    IEは・・・どうすっぺ

    キャンセル

  • 2018/03/28 18:21

    defghi1977さま

    回答有難うございます!

    2.if(!document.hasFocus()){return;}の一行で、どの環境も解決しました!
    感動です(*'▽')

    1.は、上記のコードに差し替えると、左寄席になるので、画像の右半分は切れなくなったのですが、レスポンシブが効かなくなり、画像の下部も少し切れてしまします。もう少し調整してみます。

    取り急ぎご報告です。ありがとうございますm(__)m

    キャンセル

  • 2018/03/29 13:23

    1の問題も数値を変えることで解決しました!
    ありがとうございましたm(__)m

    キャンセル

0

//画像がフェードイン・フェードアウトで切り替わるシンプルなスライドショー
$(function(){
var $width =980; // 横幅  
var $height =660; // 高さ

//画像がフェードイン・フェードアウトで切り替わるシンプルなスライドショー
$(function(){
var $width =2000; // 横幅  
var $height =1500; // 高さ

上記の数値をウィンドウの横幅に近いサイズを入れたら、画面いっぱいにh画像が切れず表示されました。(以前試した際は上手くいかなかったのですが...)

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 87.50%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る