現在HTML、CSSで自社のホームページを作っており、インターネットの記事を参考に「A Simple jQuery Slideshow」を使いトップ画像が数秒間隔でフェイドアウト・フェイドインを繰り返す仕様に致しました。しかしレスポンシブwebデザインでウィンドウサイズが768px以下の場合に上手く表示されません。(トップ画像と下のDIV要素とかぶってしまう)
以下のHTML、CSSは作成した文章です。改善点等あればお教えください。分かりづらく大変申し訳ありません。独断で文章の省略をしています。
【HTML】
<html lang="ja">
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
function slideSwitch() {
var $active = $('#slideshow img.active');
if ( $active.length == 0 ) $active = $('#slideshow img:last');
var $next = $active.next().length ? $active.next()
: $('#slideshow img:first');
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval( "slideSwitch()", 7000 );
});
</script>
</head>
<body>
<div id="main_visual">
<p id="slideshow">
<img src="images/********.jpg" alt="***********" class="active">
<img src="images/********.jpg" alt="***********"></p>
</div>
<div id="wrapper">
<div id="main">
<section id="point">
<h2>~~~~~</h2>
<p>~~~~~</P>
</section></div>
<aside id="sidebar">
<section id="side_banner">
<h2>~~~~~</h2>
</section>
</aside>
</div>
</body>
</html>
【CSS】
charset "utf-8";
#wrapper {
width: 980px;
margin: 0 auto;
overflow: hidden;
}
#main { width: 730px;
float: left;
}
<style type="text/css">
#main_visual {
width: 980px;
height: 420px;
margin: 0 auto 25px;
}
#slideshow {
position: relative;
width: 980px;
height: 420px;
margin: 0 auto 25px;
}
#slideshow img {
position: absolute;
top: 0;
left:0;
z-index: 8;
opacity: 0.0;
}
#slideshow img.active {
z-index: 10;
opacity: 1.0;
}
#slideshow img.last-active {
z-index: 9;
}
</style>
@media screen and (max-width : 767px){
img {
max-width: 100%;
}
#main_visual {
width: 100%;
height: auto
}
#slideshow {
width: 100%;
height:auto;
}
#main {
width: 100%;
padding: 0.5%;
box-sizing: border-box;
}
}
長文大変失礼致しました。ぜひともよろしくお願いいたします。