settingsログイン
メニュー

「A Simple jQuery Slideshow」を使いトップ画像が数秒間隔でフェイドアウト・フェイドインを繰り返す仕様について

閲覧 90
現在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;
}
}

長文大変失礼致しました。ぜひともよろしくお願いいたします。
匿名 2016 11/28 質問 HTML・CSS

ログインまたはユーザー登録してから回答してください。

ウェブサイト構築、HTML・CSS の企業/事業者/教室/プロの方のホームページの集客、アクセスアップ、SEO対策効果が期待できるリスティングサイト=Ask-itをぜひご活用ください

Ask IT にようこそ。ここではコミュニティメンバーに質問したり、回答を得ることができます。
ITについて質問したい方へ ITについてプロに質問したい方は会員登録後すぐに質問をする事ができます。

プロフェッショナルの方へ 質問に答えていただけるプロフェッショナルの方は下記をご覧下さい

お気づきの点があれば是非お知らせください
...