以下のコードで画像のような状態になります。画像を押すと分子が変わります。その挙動については問題ありません。
問題は分数の表示が画像の上にこないことです。重ねて表示されるようにz-indexをつけていますが、cssのleftの数値を変更しても画像と重なってくれません。
HTML
1<html> 2 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1"> 6 <meta http-equiv="x-ua-compatible" content="IE=edge"> 7 <title>5-01_countdown</title> 8 <link rel="stylesheet" href="css.css"> 9 <script src="../Shopping/jquery-3.3.1.min.js"></script> 10</head> 11 12<body> 13 14 <div class="slide-wrapper"> 15 16 <ul class="slides"> 17 <li class="slide active"><img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/spring.jpg"><span class="page"></span></li> 18 <li class="slide"><img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/rainy.jpg"><span class="page"></span></li> 19 <li class="slide"><img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/autumn.jpg"><span class="page"></span></li> 20 <li class="slide"><img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/winter.jpg"><span class="page"></span></li> 21 </ul> 22 23 </div> 24 <script type="text/javascript" src="script.js"></script> 25</body> 26 27</html>
JS
1$(function() { 2 $('.slide').click(function() { 3 $('.active').removeClass('active'); 4 5 var clickedIndex = $('.slide').index($(this)) + 1; 6 var page = clickedIndex + '/' + $('.slide').length; 7 8 if ($('.slide').length == clickedIndex) { 9 $('.slide').eq(0).addClass('active'); 10 } else { 11 $('.slide').eq(clickedIndex).addClass('active'); 12 } 13 $('.page').text(page); 14 // $(".page").text("変更後の文章"); 15 }); 16});
CSS
1.slides { 2 padding: 0; 3} 4 5.slide { 6 display: none; 7 position: relative; 8 z-index: 0; 9} 10 11.slide span { 12 position: absolute; 13 top: 0; 14 left: 70; 15 z-index: 10; 16} 17
回答1件
あなたの回答
tips
プレビュー