前提・実現したいこと
自社HPを作成していて、スライドショーを実行したいのですが
土台の画像から次の画像へスライドされなくて困っています。
自作タグではありません。
HTML
<link rel="stylesheet" href="slide.css"> <script src="js/openclose.js"></script> <script src="js/fixmenu.js"></script> <script src="js/fixmenu_pagetop.js"></script> <style> #mainimg,.slide0,.slide1,.slide2,.slide3 {background: url(images/1.jpg) no-repeat center center;} </style> <![endif]--> </head> <body id="top"> <div id="container"> <header> <h1 id="logo"><a href="index.html"><img src="graphic/logo_top.png" alt="サンプル"></a></h1> <!--スライドショー--> <aside id="mainimg"> <div class="slide0">slide0</div> <div class="slide1">slide1</div> <div class="slide2">slide2</div> <div class="slide3">slide3</div> </aside>
CSS
シート名:slide.css
/*CSSスライドショー設定 ---------------------------------------------------------------------------*/ /*1枚目*/ @keyframes slide1 { 0% {opacity: 0;} 10% {opacity: 1;} 40% {} 50% {opacity: 1;} 60% {opacity: 0;} 100% {opacity: 0;} } /*2枚目*/ @keyframes slide2 { 0% {opacity: 0;} 25% {opacity: 0;} 35% {opacity: 1;} 65% {} 75% {opacity: 1;} 85% {opacity: 0;} 100% {opacity: 0;} } /*3枚目*/ @keyframes slide3 { 0% {opacity: 0;} 50% {opacity: 0;} 60% {opacity: 1;} 80% {opacity: 1;} 90% {opacity: 0;} 100% {opacity: 0;} } /*mainimg ---------------------------------------------------------------------------*/ /*画像ブロック*/ #mainimg { clear: left; text-indent: -9999px; position: fixed; /*スクロールしても固定表示させる指定*/ top: 0px; width: 100%; height: 100%; box-shadow: 0px 0px 10px rgba(0,0,0,0.2); /*影の設定。右に、下に、広げる幅、rgbaは色で0,0,0は黒、0.2は透明度20%の事。*/ } /*3枚画像の共通設定*/ .slide1,.slide2,.slide3 { animation-duration: 15s; /*実行する時間。「s」は秒の事。*/ animation-iteration-count:infinite; /*実行する回数。「infinite」は無限に繰り返す意味。*/ position: absolute;left:0px;top:0px;width: 100%;height: 100%; animation-fill-mode: both; animation-timing-function: linear; animation-delay: 2s; } /*土台画像*/ .slide0 { background: url(graphic/0.png) no-repeat center center/cover; position: relative;width: 100%;height: 100%; } /*1枚目*/ .slide1 { background: url(graphic/1.jpg) no-repeat center center/cover; animation-name: slide1; /*上で設定しているキーフレーム(keyframes)の名前*/ } /*2枚目*/ .slide2 { background: url(graphic/2.jpg) no-repeat center center/cover; animation-name: slide2; /*上で設定しているキーフレーム(keyframes)の名前*/ } /*3枚目*/ .slide3 { background: url(graphic/3.jpg) no-repeat center center/cover; animation-name: slide3; } /*スライドショー下の曲線グラデーション画像*/ #kazari { position: absolute; bottom: 90px; /*飾りがメニューの上に配置されるよう、ここはメニューブロックの高さを指定しておく。*/ z-index: 2; width: 100%; }
試したこと
ネットサーフでスライドショーのやり方など検索し試行錯誤しました。
最初から組まれたタグをみて1つずつ確認したのですがわかりませんでした。
どうしたいか
トップページの背景画像を順番に切り替わってほしいです。
切り替わりがすぐにわかるように、秒数を15sに設定しています。
補足情報
HPエディタはFC2を使用しています。
あなたの回答
tips
プレビュー