今度は画像を5枚重ねておいて、
ボタンを押すと一番上のが透けて2枚目がみえるようになるのを作りましょう。
↑これをまちがえたのでエラーになった。
ここに；を打ってはいけない。
5枚目が消えたあとの挙動があれですね。
方法① htmlのここに最初から置いておく
<div id="frame">
<img src="img/1.jpg"><!--最初から入れておく手もある-->
</div>
方法② cssでbackground-imageで貼っておく。
#frame{
position:relative;
width:500px;
height:332px;
margin:3rem auto;
border:double 5px #555;
background-image:url('img/1.jpg');/*ここ*/
}
どっちもあり。
--->test1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="test7.css">
<title>slide</title>
<script src="../jquery-3.4.1.min.js"></script>
<link href="http://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
</head>
<body>
<div id="frame">
<img src="img/1.jpg"><!--最初から入れておく手もある-->
</div>
<p><button id="btn">次の写真</button></p>
<script src="test7.js"></script>
</body>
</html>
--->test7.css
body{
background:#333;
}
#frame{
position:relative;
width:500px;
height:332px;
margin:3rem auto;
border:double 5px #555;
/*background-image:url('img/1.jpg');*/
}
#frame img{
position:absolute;
}
p{
text-align:center;
}
--->test7.js
body{
background:#333;
}
#frame{
position:relative;
width:500px;
height:332px;
margin:3rem auto;
border:double 5px #555;
/*background-image:url('img/1.jpg');*/
}
#frame img{
position:absolute;
}
p{
text-align:center;
}
