みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

スライドショーに妙な間がある。

いつも為になるアドバイスありがとうございます。
HP作成してるなかで気になったことがあるのですが、jQueryでスライドショーを設定して
画像からリンクを設定すると妙な間があって気になります。
原因は何でしょうか?
ご指導願います。

HTMLフォーム
<!DOCTYPE html><!---->
<html>
<head>
<meta charset="utf-8">
<title>ファッション通販サイト”Ce qui plait aux fill”</title>
<style>/*CSS*/</style>
<link rel="stylesheet" href="top.css" type="text/css" media="all">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('.fadein img:gt(0)').hide();
setInterval(function() {
$('.fadein :first-child').fadeOut()
.next('img').fadeIn()
.end().appendTo('.fadein');
}, 3000);
});
</script>

<link rel="stylesheet" href="top.css" type="text/css" media="all">
</head>

<body>
<div id="wrapper">
<div class="header">
<h1 class="logo"><img src="img/top-logo-01.jpg" /></h1>
</div><!--header-->

<div class="section">
<div class="fadein">
<a href="リンク01.html"><img src="画像01.jpg" width="400px" height="auto" /></a>
<a href="リンク02.html"><img src="画像02.jpg" width="400px" height="auto" /></a>
<a href="リンク03.html"><img src="画像03.jpg" width="400px" height="auto" /></a>
<a href="リンク04.html"><img src="画像04.jpg" width="400px" height="auto" /></a>
<a href="リンク05.html"><img src="画像05.jpg" width="400px" height="auto" /></a>
<a href="リンク06.html"><img src="画像06.jpg" width="400px" height="auto" /></a>
<a href="リンク07.html"><img src="画像07.jpg" width="400px" height="auto" /></a>
<a href="リンク08.html"><img src="画像08.jpg" width="400px" height="auto" /></a>
<a href="リンク09.html"><img src="画像09.jpg" width="400px" height="auto" /></a>
<a href="リンク10.html"><img src="画像10.jpg" width="400px" height="auto" /></a>
<a href="リンク11.html"><img src="画像11.jpg" width="400px" height="auto" /></a>
</div><!--fadein-->
</div><!--section-->

<div class="img">
<p><img src="img/waku.jpg" /></p>
</div><!--img-->
<div class="news">
<div class="new-item">
<p><img src="img/new-item.jpg" /></p>
</div><!--new-item-->
</div><!--news-->

<div class="item-menu">
<p>最新のアイテムを紹介します。</p>
<ul>
<li><a href="#">サンダル</a></li>
<li><a href="#">パンプス</a></li>
<li><a href="#">タンクトップ</a></li>
<li><a href="#">キュロット</a></li>
<li><a href="#">スカート</a></li>
<li><a href="#">ウェッジソール</a></li>
<li><a href="#">トレンチコート</a></li>
<li><a href="#">カーディガン</a></li>
<li><a href="#">ルームウェア</a></li>
<li><a href="#">バック</a></li>
</ul>
</div><!--item-menu-->

<div id="footer">
<ul>
<li><a href="#">TOP</a></li>
<li><a href="#">リンク</a></li>
<li><a href="#">サイトマップ</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</div><!--footer-->
</div><!--wrapper-->
</body>
</html>


CSSフォーム
@charset"utf-8";
body{
width:100%;
background: #EDE8EA url(img/dot/14.gif) repeat;
}

body
.fadein { position:relative;}
.fadein img { position:absolute; left:20px; top:35px; }

#wrapper{
margin:auto;
width:980px;
}

.header{
width:980px;
padding:0;
border: 10px groove #cfc;
background:#fff;
}

.section{
margin:30px 0 0;
}

.img{
float:left;
}

.news{
float:left;
margin:20px;
background:#fff;
width:500px;
border-radius: 10px;
}

.new-item{
text-align: center;
margin:20px 0 0 0;
}

.item-menu{
float:left;
margin:0 20px;
font-size:30px;
}

.item-menu li{
font-size:24px;
background-color:#fff;
width:300px;
list-style:none;
text-align:center;
margin:5px;
}

.item-menu a{
text-decoration:none;
}

.item-menu li:hover{
text-decoration:underline;
background-color:#ADFF2F;
}

#footer{
clear: both;
}

投稿日時 - 2013-06-09 02:49:55

QNo.8125706

困ってます

質問者が選んだベストアンサー

>画像からリンクを設定すると妙な間があって気になります。
どこのことを指しているのかよくわかりませんが…

リンク先とクリックした画像の関係のことを言っているのであれば、画像の切替えの仕組みとして、画像を重ねておいて上にある画像をフェードアウトしていますが、クリックした際にほとんど透明になっていても上にある画像がクリックされたと認識されます。
このあたりが、見た目と印象が違うのが原因ではないでしょうか?

意味が違っていたら、無視してください。

投稿日時 - 2013-06-10 11:29:18

補足

私の質問の内容に少し説明が足りない所があり申し訳ありません。
HTMLの
<div class="section">
<div class="fadein">~</div>で画像を指定してスライドショーを展開しています。
私はここで、楽天さんやアマゾンさんのように、スライドショーの画像をクリックして、画像に関する詳細な外部リンクに飛べるようにしたいのです。
ちなみに、流れとしては洋服の画像→外部リンクで商品の詳細やサイズを確認出来るようにしています。

ちなみに回答の対策としては、画像を1番上の画像を1番下に移動するようして、これを繰り返せばいいのでしょうか?

投稿日時 - 2013-06-11 09:03:23

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問