~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で質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS flex の各子要素を横幅 100% にしたい 1 2022/09/22 21:25
- HTML・CSS htmltとcssの連携をして画像縮小について 1 2022/11/15 20:32
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- JavaScript アップロードファイルの種類によって処理を分岐させたいのですが書き方が分からずアドバイスお願いします 4 2023/06/17 19:12
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
Slick.jsのオプションrtlについて
-
【jQuery】2分割レイアウトで、...
-
html内でのマウスオーバー時に...
-
チェックボックスと画像切替の連動
-
jQuery bxSlider でのアニメー...
-
MAX関数を使ってからLEFT JOIN...
-
Vb.net2005での画像の合成方法
-
c++std::string型をTCHARに変換...
-
HTMLからimgのsrcのみを正規表...
-
IplImageのBmp変換。
-
<div ~ </div> で囲まれたテキ...
-
IFRAMEの表示/非表示を切り替え...
-
jqueryのsortableで一部ソート...
-
動的にHTMLコンテンツを吹き出...
-
変数名をどのようにつけるのが...
-
jQueryでシンプルドラッグドロ...
-
プルダウンの位置がwin/macでず...
-
クリックで色変更後に既に変更...
-
JSPでの画像ファイル表示
-
OpenCVの実行エラー
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Slick.jsのオプションrtlについて
-
同一ページ内の複数のタグに同...
-
【jQuery】2分割レイアウトで、...
-
キャラクターがぴょこんと飛び...
-
画像をフェードアウト&フェー...
-
jqueryのプラグインslickの画像...
-
html5に変えるとスライドショー...
-
Javaスクリプトで画像を縦にス...
-
high slideをFC2ブログで
-
ご教授ください。
-
jQueryでタブ、スライダーを使...
-
チェックボックスと画像切替の連動
-
jQueryのclickイベントハンドラ
-
javascriptで文字サイズの変更
-
fontsize.jsでhtmlの大中小の設...
-
【iOS及びAndroid】リンク画像...
-
Firefoxとクロームでフェードイ...
-
javascript src書き換え
-
神経衰弱 順番に裏返し
-
アコーディオンメニューが開い...
おすすめ情報