jqureryスライドショーが上手くいきません。

解決済

質問者：emuemu84
質問日時：2013/02/05 11:54
回答数：2件

こんにちは。
web初心者です。

今、jqueryを使いスライドショーを作っているのですが
上手く行きません。
5枚の画像を重ねてフェードイン　フェードアウトみたいな形にしてるのですが、最後の画像だけdisplay: none;が適用されなくてきれいに表示出来ません。
どなたか詳しい方、宜しくお願い致します。
<HTML>
<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>

<CSS>
#contents {
width: 950px;
margin-right: auto;
margin-left: auto;
height: auto;

.slideshow {
width: 950px;
border-top-width: 1px;
border-top-style: solid;
clear: both;
padding-top: 60px;
height: auto;
position: relative;
float: left;
}
.slideshow img {
position: absolute;
}
.slideshow img .alt {
display: none;
}

通報する

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

質問の本文を隠す

回答 (2件)

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

No.2ベストアンサー

回答者： yuu_x
回答日時：2013/02/05 16:05

ごめんなさい、ようやく意図がつかめました。

.slideshow img .alt → .slideshow .alt

もしくは、
.slideshow img .alt → .slideshow img.alt // スペースが余分です。

- 0
- 件

通報する

この回答へのお礼

本当に単純なミスで申し訳ございませんでした。
スペースが入るとか入らないとか細かい事がわかってません。

ありがとうございました。
また、宜しくお願いします。

通報する

お礼日時：2013/02/05 16:27

No.1

回答者： yuu_x
回答日時：2013/02/05 14:41

説明文だけでは、どこに問題があるかわかりませんので、書いたプログラムを提示していただけないでしょうか？

この回答への補足

補足します。
<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>

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