- ベストアンサー
JQueryスライドショーが上手くいかない理由とは？
- 上手く行かないJQueryスライドショーの理由として、最後の画像の表示問題が挙げられます。HTMLとCSSのコードを確認し、display: none;が適用されているか確認してみましょう。
- JQueryを使用して作成したスライドショーで、最後の画像がきれいに表示されない問題が発生しています。最後の画像にはdisplay: none;が適用されない可能性がありますので、HTMLとCSSのコードを確認してみてください。
- JQueryを使用して作成したスライドショーで、最後の画像がうまく表示されないという問題があります。最後の画像にはdisplay: none;が適用されていない可能性があるため、HTMLとCSSのコードを再確認してみてください。
- emuemu84
- お礼率81% (9/11)
- その他（プログラミング・開発）
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
ごめんなさい、ようやく意図がつかめました。 .slideshow img .alt → .slideshow .alt もしくは、 .slideshow img .alt → .slideshow img.alt // スペースが余分です。
その他の回答 (1)
- yuu_x
- ベストアンサー率52% (106/202)
説明文だけでは、どこに問題があるかわかりませんので、書いたプログラムを提示していただけないでしょうか？
補足
補足します。 <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>LAZY</title> <link href="style.css" rel="stylesheet" type="text/css"> <!-- デスクトップ --> <link href="desktop.css" rel="stylesheet" type="text/css" media="only screen and (min-width:950px)"> <script src="jquery-1.8.3.min.js"></script> <script src="index.js"></script> <!--[if lt IE 9]> <script src="dist/html5shiv.js"></script> <![endif]--> </head> <body> <div id="container"> <h1><a href="index.html"><img src="img1.jpg" width="150" height="160" alt="lazy" onmouseover="this.src='img2.jpg';" onmouseout="this.src='img1.jpg'" /> </a></h1> <div id="nav"> <ul> <li><a href="concept.html">CONCEPT</a></li> <li><a href="style.html">STYLE&GALLERY</a></li> <li><a href="http://ameblo.jp/lazy84/">BLOG</a></li> <li><a href="contact.html">CONTACT</a></li> </ul> </div></div> <div id="contents"> <div class="slideshow"> <img src="top30.jpg" width="950" height="450"> <img src="top21.jpg" width="950" height="450" class="alt"> <img src="top20.jpg" width="950" height="450" class="alt"> <img src="top22.jpg" width="950" height="450" class="alt"> <img src="top23.jpg" width="950" height="450" class="alt"> </div> </div> </body> </html> <CSS> @charset "UTF-8"; /* CSS Document */ h1 { border-bottom-style: none; border-top-style: none; border-right-style: none; border-left-style: none; margin-bottom: 40px; float: left; padding-top: 50px; } p { font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-size: 14px; line-height: 24px; } #contents { width: 950px; margin-right: auto; margin-left: auto; height: auto; } #container { padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; width: 950px; } body { font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-size: 14px; background-image: url(img6.jpg); } #nav ul { list-style-type: none; padding-left: 0px; margin-top: 0px; padding-top: 0px; padding-bottom: 0px; width: 950px; } #nav ul li { float: left; border-right-width: 0px; border-right-style: none; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-top-style: none; border-bottom-style: none; border-left-style: none; } #nav ul li a:hover { color: #F00; } #nav ul li a { font-size: 14px; color: #FFF; text-decoration: none; width: 160px; text-align: center; display: block; line-height: 45px; margin-top: 150px; background-color: #666; margin-left: 10px; } #nav li a { background-image: -moz-linear-gradient(top,#888 0%, #777 50%, #666 50%, #777 100%); } #nav li a{ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #555), color-stop(0.50, #444), color-stop(0.50, #333), color-stop(1, #444)); text-shadow:0 -1px 0px #333 ,0 1px 0px #555 } #nav li:first-child a{ border-radius:5px 0 0 5px; } #nav li:last-child a{ border-radius:0 5px 5px 0; } .slideshow { width: 950px; border-top-width: 1px; border-top-style: solid; border-top-color: #000; border-right-color: #000; border-bottom-color: #000; border-left-color: #000; clear: both; padding-top: 60px; height: auto; position: relative; float: left; } .slideshow img { position: absolute; } .slideshow img .alt { display: none; } $(function(){ var interval = 3000; $('.slideshow').each(function(){ var container = $(this); function switchImg(){ var imgs = container.find('img'); var first = imgs.eq(0); var second = imgs.eq(1); first.fadeOut().appendTo(container); second.fadeIn(); } setInterval(switchImg,interval); }); });
お礼
本当に単純なミスで申し訳ございませんでした。 スペースが入るとか入らないとか細かい事がわかってません。 ありがとうございました。 また、宜しくお願いします。