Q&A
実現したいこと
専門書「Web制作の現場で使う jQueryデザイン入門[改訂新版]_P266」の
サンプルコードを編集した所、スライドギャラリーの下部に表示されるはずの
ページング(#paging)の小さな丸い画像(page.pngとpage_active.png)が表示されなくなってしまいました。
どこに原因があるのかが分からなくて困っています。
教えて頂けないでしょうか。よろしくお願いします。
(編集後のページ）
https://upload0605.web.fc2.com/files_jun052023/idx.html
ディレクトリ
[files_jun052023]
|-- idx.html
|
|-- [css]-- style.css
|
|
|-- [img]-- page.png
| ----------page_active.png
|
|-- [jq]-- app.js
|
該当のソースコード
<!-- サンプルコード--> <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>sample1</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script> $(function(){ //ページングの設定 $("#slide li").each(function(){ $("#paging").append($("<li></li>").attr("data-img",$("img",this).attr("src"))); }); $("#paging li:first-child").addClass("active"); //右矢印ボタンが押された際の挙動 $("#nav .next").click(function(){ $("#slide:not(:animated)").animate({ "margin-left" : -1*$("#slide li").width() },function(){ $("#slide").css("margin-left","0").append($("#slide li:first-child")); $("#paging li.active").removeClass("active"); $("#paging li[data-img='"+$("#slide li:first-child img").attr("src")+"']").addClass("active"); }); }); //左矢印ボタンが押された際の挙動 $("#nav .prev").click(function(){ $("#slide:not(:animated)") .css("margin-left",-1*$("#slide li").width()) .prepend($("#slide li:last-child")) .animate({ "margin-left" : 0 },function(){ $("#paging li.active").removeClass("active"); $("#paging li[data-img='"+$("#slide li:first-child img").attr("src")+"']").addClass("active") }); }); }); </script> <style> *{ list-style-type:none; margin:0; padding:0; } #container{ width:650px; margin:100px auto; } #slideGalley{ width:650px; position: relative; overflow:hidden; } #slide{ width:10000px; } #slide li{ float:left; } #paging{ text-align: center; position: absolute; width:100%; bottom:10px; } #paging li{ display: inline-block; *display: inline; *zoom:1; width:20px; height:20px; background: url(./images/page.png); } #paging li.active{ background: url(./images/page_active.png); } #nav .prev{ position: absolute; left:10px; top:50%; margin-top:-50px; } #nav .next{ position: absolute; right:10px; top:50%; margin-top:-50px; } </style> </head> <body> <div id="container"> <div id="slideGalley"> <ul id="slide"> <li><a href="#"><img src="./images/photo01.jpg" alt=""></a></li> <li><a href="#"><img src="./images/photo02.jpg" alt=""></a></li> <li><a href="#"><img src="./images/photo03.jpg" alt=""></a></li> <li><a href="#"><img src="./images/photo04.jpg" alt=""></a></li> </ul> <div id="nav"> <img src="./images/nav_prev.png" class="prev"> <img src="./images/nav_next.png" class="next"> </div> <ul id="paging"></ul> </div> </div> </body> </html>
HTML5
1<!-- 編集後のページ --> 2<!DOCTYPE html> 3<html lang="ja"> 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 <!-- jQuery --> 8 <script crossorigin="anonymous" 9 integrity ="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" 10 src ="https://code.jquery.com/jquery-3.3.1.min.js"> 11 </script> 12 <link href="css/style.css" rel="stylesheet"> 13 </head> 14 <body> 15 <div id="container"> 16 <div id="slideGalley"> 17 <ul id="slide"> 18 <li> 19 <a href="#"> 20 <img src="img/photo01.jpg" alt=""> 21 </a> 22 </li> 23 <li> 24 <a href="#"> 25 <img src="img/photo02.jpg" alt=""> 26 </a> 27 </li> 28 <li> 29 <a href="#"> 30 <img src="img/photo03.jpg" alt=""> 31 </a> 32 </li> 33 <li> 34 <a href="#"> 35 <img src="img/photo04.jpg" alt=""> 36 </a> 37 </li> 38 </ul> 39 <div id="nav"> 40 <img src="img/nav_prev.png" class="prev"> 41 <img src="img/nav_next.png" class="next"> 42 </div> 43 <ul id="paging"></ul> 44 </div> 45 </div> 46 <script src="js/app.js"></script> 47 </body> 48</html>
CSS3
1// 編集後のページ 2@charset utf-8; 3 4* { 5 list-style-type : none; 6 margin : 0; 7 padding : 0; 8} 9 10#container { 11 margin : 100px auto; 12 width : 650px; 13} 14 15#nav .next { 16 margin-top : -50px; 17 position : absolute; 18 right : 10px; 19 top : 50%; 20} 21 22#nav .prev { 23 left : 10px; 24 margin-top : -50px; 25 position : absolute; 26 top : 50%; 27} 28 29#paging { 30 bottom : 10px; 31 position : absolute; 32 text-align : center; 33 width : 100%; 34} 35 36#paging li { 37 background : url(../img/page.png); 38 display : inline; 39 height : 20px; 40 width : 20px; 41} 42 43#paging li.active { 44 background : url(../img/page_active.png); 45} 46 47#slide { 48 width : 10000px; 49} 50 51#slide li { 52 float : left; 53} 54 55#slideGalley { 56 overflow : hidden; 57 position : relative; 58 width : 650px; 59} 60
jQuery
1// 編集後のページ 2jQuery(function($) { 3 4 //ページングの設定 5 $('#slide li').each(function() { 6 $('#paging').append( $('<li></li>').attr({ 'data-img' : $('img', this).attr('src') }) ); 7 }); 8 $('#paging li:first-child').addClass('active'); 9 10 //右矢印ボタンが押された際の挙動 11 $('#nav .next').on('click', function() { 12 $('#slide:not(:animated)').animate( 13 { marginLeft : -1 * $('#slide li').width() }, 14 function() { // callback 15 $('#slide') 16 .css({ marginLeft : 0 }) 17 .append( $('#slide li:first-child') ); 18 $('#paging li.active').removeClass('active'); 19 $(`#paging li[ data-img="${ $('#slide li:first-child img').attr('src') }" ]`).addClass('active'); 20 } 21 ); 22 }); 23 24 //左矢印ボタンが押された際の挙動 25 $('#nav .prev').on('click', function() { 26 $('#slide:not(:animated)') 27 .css({ marginLeft : -1 * $('#slide li').width() }) 28 .prepend( $('#slide li:last-child') ) 29 .animate( 30 { marginLeft : 0 }, 31 function() { // callback 32 $('#paging li.active').removeClass('active'); 33 $(`#paging li[ data-img="${ $('#slide li:first-child img').attr('src') }" ]`).addClass('active'); 34 } 35 ); 36 }); 37 38}); // jQuery(function($) {})
試したこと
画像ファイルのパスを何度も調べました。
回答1件
0
ベストアンサー
css
1#paging li { 2 background : url(../img/page.png); 3 display : inline; 4 height : 20px; 5 width : 20px; 6}
display : inline;でインライン要素に変換してますが、インライン要素にはheightやwidthは効きません。
ここを display : inline-block;にすればheightやwidthが効くようになり表示されるようになるでしょう。
投稿2023/06/05 11:55
総合スコア33699
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2023/06/05 12:44