~head~---------------------------------------------
<!DOCTYPE html><html lang="ja">
<head>
memo帳タグうちして作成したホームページです。
下記のように記載して動いていたスライドショーが、
バージョンアップしようと思い、headを上記にかえると表示されず、代替もなく詰まって表示されます。(body内もすべてhtml5仕様に変更)
headを下記に変えるとスライドショーが表示されます。
根本的なことなのだと思うのですが、html5で表示したいのですが、どこをどう直せばよいのか困っております。
ご教授いただけるとありがたいです。
よろしくお願い致します。
~head~---------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="//www.w3.org/1999/xhtml" lang="ja-JP" xml:lang="ja-JP">
<head>
~html~---------------------------------------------
<div class="viewer">
<ul>
<li><img src="image/fl01.jpg" alt="画像"></li>
<li><img src="image/fl02.jpg" alt="画像"></li>
<li><img src="image/fl03.jpg" alt="画像"></li>
</ul>
</div>
~CSS~--------------------------------------------
.viewer {
margin: 0 auto;
width: 100%;
position: relative;
}
.viewer ul {
width: 100%;
overflow: hidden;
position: relative;
}
.viewer ul li {
width: 100%;
position: absolute;
}
.viewer ul li img {
width: 100%;
}
~js~-----------------------------------------
$(function(){
var $setElm = $('.viewer'),
fadeSpeed = 1500,
switchDelay = 5000;
$setElm.each(function(){
var targetObj = $(this);
var findUl = targetObj.find('ul');
var findLi = targetObj.find('li');
var findLiFirst = targetObj.find('li:first');
findLi.css({display:'block',opacity:'0',zIndex:'99'});
findLiFirst.css({zIndex:'100'}).stop().animate({opacity:'1'},fadeSpeed);
setInterval(function(){
findUl.find('li:first-child').animate({opacity:'0'},fadeSpeed).next('li').css({zIndex:'100'}).animate({opacity:'1'},fadeSpeed).end().appendTo(findUl).css({zIndex:'99'});
},switchDelay);
});
});
No.3ベストアンサー
- 回答日時:
No2です。
>この行の書き方がおかしいのでしょうか?
記述自体はおかしくありませんけれど、外部CSSを読み込んでいるので、その記述の中に何か邪魔をしている内容があるものと推測されます。
>アップしているCSSのフォルダごと消しても、上記の行があると表示されません。
ブラウザのキャッシュに残っている可能性があります。
キャッシュを削除したり、フルリロードなどを行っても改善しませんか?
>この行の書き方がおかしいのでしょうか?
>何度も申し訳ないですが、よろしくお願い致します。
上記くらいは、推測できるようになりましょう。
fujillin様
無事できました!!
キャッシュの問題かな?と、普段使っていないブラウザで確認したのですが、同じ状況だったので、キャッシュの問題ではないと安易に考えてしまいました。
ご指摘いただき、確かにフォルダごと消したのにそんなわけがないなと、
別の新たな環境を作成してそちらにアップしてみるとできました!!
勉強になりました。
長らく悩んでいたので解決して本当によかったです。
大変お世話になりました!!
丁寧にありがとうございました。
No.2
- 回答日時:
No1です。
>ヘッドが上記のままでは、画像が表示されませんでした。
どこかおかしなところが残っていたりしませんか?
とりあえず、最低限にしてみたものを以下に。
(全文コピペで試してみてください)
※ 不要部分は全て削除してありますので、適宜追加してください。
※ overflowの設定を外す方法なので、ulの高さは0のままです。
※ Chrome、fx、Edge で確認。
<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<meta charset=utf-8">
<style>
.viewer ul { position: relative; }
.viewer li {
width: 100%; opacity: 0;
position: absolute; top: 0; left: 0;
}
.viewer li img { width: 100%; }
</style>
</head>
<body>
<div class="viewer">
<ul>
<li><img src="image/fl01.jpg" alt="画像"></li>
<li><img src="image/fl02.jpg" alt="画像"></li>
<li><img src="image/fl03.jpg" alt="画像"></li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6 …
<script>
$(()=>{
const speed = 1500, delay = 5000;
$('.viewer').each(function(){
const ul = $('ul', this);
$('li:first', ul).animate({opacity: 1}, speed);
setInterval(()=>{
$('li:first', ul).appendTo(ul).animate({opacity: 0}, speed);
$('li:first', ul).animate({opacity: 1}, speed);
}, delay);
});
});
</script>
</body>
</html>
とても丁寧にありがとうございます!!
送ってくださったもののみにすると動きました!!
原因はやはり、CSSの中で他に邪魔しているものがあるようです。
少しずつ追加していき、
<link rel="stylesheet" type="text/css" media="screen,print" href="css/import.css">
の行を消すと表示されますが、
最終、アップしているCSSのフォルダごと消しても、上記の行があると表示されません。
この行の書き方がおかしいのでしょうか?
何度も申し訳ないですが、よろしくお願い致します。
<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<meta charset=utf-8">
<link rel="stylesheet" type="text/css" media="screen,print" href="css/import.css">
<style>
.viewer ul { position: relative; }
.viewer li {
width: 100%; opacity: 0;
position: absolute; top: 0; left: 0;
}
.viewer li img { width: 100%; }
</style>
</head>
<body>
No.1
- 回答日時:
こんばんは
詳しくは見ていませんけれど、画像が表示されない原因はul要素の
>overflow: hidden;
であろうと考えられます。
子要素(=li)は全て position:absolute; になっているので、実質の内包物がないため ul の高さは0になります。
そこに、overflow: hidden; とすれば子要素は全て範囲外にあるので、表示されなくなります。
対応策としては、ulにきちんと高さを与えるか、あるいは「overflow: hidden;」を削除するなどでしょうか。
(対応法によって、後続要素の表示位置が変わってきますけれど、実際がどうなっているのか不明なので・・)
早速の回答ありがとうございます!!
やってみました。
.viewer ul {
width: 100%;
position: relative;
}
にしても、
.viewer ul {
width: 100%;
position: relative;
height: 300px;
}
にしても
<!DOCTYPE html><html lang="ja">
<head>
ヘッドが上記のままでは、画像が表示されませんでした。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・14歳の自分に衝撃の事実を告げてください
- ・架空の映画のネタバレレビュー
- ・「お昼の放送」の思い出
- ・昨日見た夢を教えて下さい
- ・ちょっと先の未来クイズ第4問
- ・【大喜利】【投稿~10/21(月)】買ったばかりの自転車を分解してひと言
- ・メモのコツを教えてください!
- ・CDの保有枚数を教えてください
- ・ホテルを選ぶとき、これだけは譲れない条件TOP3は?
- ・家・車以外で、人生で一番奮発した買い物
- ・人生最悪の忘れ物
- ・【コナン30周年】嘘でしょ!?と思った○○周年を教えて【ハルヒ20周年】
- ・ハマっている「お菓子」を教えて!
- ・最近、いつ泣きましたか?
- ・夏が終わったと感じる瞬間って、どんな時?
- ・10秒目をつむったら…
- ・人生のプチ美学を教えてください!!
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・都道府県穴埋めゲーム
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
横並びの画像を3枚時間差でフェ...
-
Slick.jsのオプションrtlについて
-
MAX関数を使ってからLEFT JOIN...
-
自働生成される<div>タグに連番...
-
textareaに画像を表示したい
-
条件分岐でキーが入力されてい...
-
iframe内のリンクが飛ばないの...
-
JavaScriptで変更した属性の元...
-
c++std::string型をTCHARに変換...
-
ラズパイでno module named zbar
-
jquery ドロップダウンメニュー...
-
CSS <div>の入れ子が反映さ...
-
スワップイメージが上手く動作...
-
removeEventListenerについて
-
CSSで指定したwidthをマウスで...
-
JSPでの画像ファイル表示
-
テキストボックスに入力された...
-
サムネイルにカーソルを合わせ...
-
【CSS】floatで左右に並べた...
-
OpenCVを用いたヒストグラムの...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Slick.jsのオプションrtlについて
-
【jQuery】2分割レイアウトで、...
-
チェックボックスと画像切替の連動
-
キャラクターがぴょこんと飛び...
-
チェックボックスで画像を一括表示
-
bxSliderのランダム表示について
-
javascript 神経衰弱
-
fontsize.jsでhtmlの大中小の設...
-
ジャバスクリプトでクリックし...
-
javascript setTimeout
-
リモートロールオーバーを教え...
-
JQueryを使ってcssを書き換え
-
qtipの使い方について
-
Dreamweaver上とデバイスプレビ...
-
jquery 要素数に応じたwidthの...
-
横並びの画像を3枚時間差でフェ...
-
スライドショー「Skitter」をカ...
-
JavaScriptかPHPを使って表示枚...
-
jqueryを使ってポップアップを...
-
Flickrのような綺麗なサムネイ...
おすすめ情報