#jQueryを使って複数画像をフェードインフェードアウトで切替表示しようと下のコードを書いています。
html
1 <article class="mainvisual"> 2 <div id="slide"> 3 <img src="./images/main_visual-min.jpg" alt="メインビジュアル"> 4 <img src="./images/main_visual-min-2.jpg" alt="メインビジュアル2"> 5 <img src="./images/main_visual-min-3.jpg" alt="メインビジュアル3"> 6 </div> 7 <h2>素材の味を極める</h2> 8 </article>
CSS
1.mainvisual{ 2 position: relative; 3} 4 5#slide img{ 6 height: 700px; 7 object-fit: cover; 8 object-position: 0 65%; 9 -webkit-clip-path: polygon(0 0, 100% 0%, 100% 85%, 0% 100%); 10 clip-path: polygon(0 0, 100% 0%, 100% 85%, 0% 100%); 11} 12 13.mainvisual h2{ 14 position: absolute; 15 left: 4%; 16 transform: translateY(-290%); 17 font-size: 4vw; 18 color: #fff; 19} 20
jQuery
1 2 $(document).ready(function(){ 3 $('#slide img:gt(0)').hide(); 4 setInterval(function() { 5 $('#slide :first-child').fadeOut().next('img').fadeIn().end().appendTo('#slide'); 6 },3000); 7 }); 8
####上記コードだと、画像が切り替わるときに表示されていた画像が下にずれ落ちて、その後に次の画像が表示れてしまいます。
上記コードを用いたサイトをUPしていますので、よろしければ現状をご確認ください。
→ http://ivory-sushi-restaurant.ivorytowerlab.jp/
コードを参考にしたサイトは下記になります。
→ https://dad-union.com/javascript/69
どうすれば参考にしたサイトのデモ(https://dad-union.com/demo/js/20130912-fadein-fadeout-setinterval-appendto/)のように
画像が綺麗にフェードインフェードアウトで切り替えられるでしょうか?
jQueryは <head>〜</head>タグ内にCDNで
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>と読み込んでいます。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。