html5に変えるとスライドショーが消えてしまった。

解決済

質問者：chaチャチャ
質問日時：2022/03/26 19:53
回答数：3件

～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);
});
});

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： fujillin
回答日時：2022/03/27 23:23

No2です。

＞この行の書き方がおかしいのでしょうか？
記述自体はおかしくありませんけれど、外部CSSを読み込んでいるので、その記述の中に何か邪魔をしている内容があるものと推測されます。

＞アップしているCSSのフォルダごと消しても、上記の行があると表示されません。
ブラウザのキャッシュに残っている可能性があります。
キャッシュを削除したり、フルリロードなどを行っても改善しませんか？

＞この行の書き方がおかしいのでしょうか？
＞何度も申し訳ないですが、よろしくお願い致します。
上記くらいは、推測できるようになりましょう。

- 0
- 件

通報する

この回答へのお礼

fujillin様

無事できました！！
キャッシュの問題かな？と、普段使っていないブラウザで確認したのですが、同じ状況だったので、キャッシュの問題ではないと安易に考えてしまいました。

ご指摘いただき、確かにフォルダごと消したのにそんなわけがないなと、
別の新たな環境を作成してそちらにアップしてみるとできました！！

勉強になりました。
長らく悩んでいたので解決して本当によかったです。
大変お世話になりました！！

丁寧にありがとうございました。

通報する

お礼日時：2022/03/29 22:56

No.2

回答者： fujillin
回答日時：2022/03/26 23:45

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>

- 1
- 件

通報する

この回答へのお礼

とても丁寧にありがとうございます！！

送ってくださったもののみにすると動きました！！
原因はやはり、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>

通報する

お礼日時：2022/03/27 22:17

参考程度に

No.1

回答者： fujillin
回答日時：2022/03/26 21:26

こんばんは

詳しくは見ていませんけれど、画像が表示されない原因はul要素の
＞overflow: hidden;
であろうと考えられます。

子要素（=li）は全て position:absolute; になっているので、実質の内包物がないため ul の高さは0になります。
そこに、overflow: hidden; とすれば子要素は全て範囲外にあるので、表示されなくなります。

対応策としては、ulにきちんと高さを与えるか、あるいは「overflow: hidden;」を削除するなどでしょうか。
（対応法によって、後続要素の表示位置が変わってきますけれど、実際がどうなっているのか不明なので・・）

- 0
- 件

通報する

この回答へのお礼

早速の回答ありがとうございます！！

やってみました。

.viewer ul {
width: 100%;
position: relative;
}

にしても、
.viewer ul {
width: 100%;
position: relative;
　height: 300px;
}

にしても
<!DOCTYPE html><html lang="ja">
<head>

ヘッドが上記のままでは、画像が表示されませんでした。