実現したいこと
ズームアップで、5秒で次の画像に切り替わる。その際、前の画像の残像が残るようにじわじわと次の画像に切り替わるsliderにする。リンク内容https://www.ginga999.co.jp/このサイトのslideは、画像が後退していますが、画像がじわじわと切り替わるイメージ。
発生している問題・分からないこと
sliderそのものは出来たが、画像の切り替えが早い。ボタンを切り替えるように変わってしまう。
該当のソースコード
html
1<body> 2<div class="top_fixed"> 3 <div class="headtop" id="headtop"> 4 <div class="head_logo"> 5 <a href="index.html"><img src="img/city-search_06.png" alt="logo"></a> 6 </div> 7 <div class="head_right"> 8 <div class="headtext">text</div> 9 <div class="headtext2">text</div> 10 </div> 11 </div> 12</div> 13 <div class="header"> 14 <div class="slide"> 15 <ul> 16 <li> 17 <a href="bus_toppage.html" alt="slide_img"><img src="img/2357486_kankouao_1400.png" alt="Slide 1" /><div class="text-overlay">text</div></a> 18 </li> 19 <li> 20 <a href="bus_toppage.html" alt="slide_img"><img src="img/1679585_1400.png" alt="Slide 2" /><div class="text-overlay">text2</div></a> 21 </li> 22 <li> 23 <a href="bus_toppage.html" alt="slide_img"><img src="img/1339937_1400_600.jpg" alt="Slide 3" /><div class="text-overlay">text3</div></a> 24 </li> 25 <li> 26 <a href="index.html" alt="slide_img"><img src="img/625842_1400.jpg" alt="Slide 4" /></a> 27 </li> 28 <li> 29 <a href="index.html" alt="slide_img"><img src="img/3025924_1400.jpg" alt="Slide 5" /></a> 30 </li> 31 </ul> 32 </div> 33 </div> 34 35 <div class="contents"> 36 <div class="kijibox"> 37 <div class="kiji_link"> 38 <span><a href="#">text</a><br/></span> 39 text<br/> 40 text<br/> 41 text<br/> 42 </div> 43 44 </div> 45 46 <div class="kita_side_nav"> 47 <div class="link"> 48 <span><a href="#">text</a></span> 49 </div> 50 </div> 51 </div> 52 53 54</body> 55</html>
css
1.top_fixed { 2 width: 100%; 3 position: relative; 4 top: 0px; 5 background-color: #fff;/* 背景色を追加して潜り込みを防ぐ */ 6 z-index: 9; 7} 8.headtop { 9 width: 100%; 10 display: flex; 11 position: fixed; 12 z-index: 11; 13 background-color: rgb(4 70 104); 14 padding: 10px 2%; 15 transition: height 0.3s ease, font-size 0.3s ease; 16 height: auto; 17 18} 19 20.head_logo{ 21 width:50%; 22 transition: height 0.3s ease; 23} 24 25.head_logo img{ 26 max-width:35%; 27 transition: height 0.3s ease; 28 } 29 30.head_right{ 31 width:40%; 32 margin: 5px 0 0 0; 33} 34 35.headtext, .headtext2 { 36 color: #fff; 37 overflow: hidden; 38 transition: font-size 0.3s ease; 39} 40.headtext { 41 font-size: 22px; 42 font-weight: 400; 43 margin-top: 3%; 44} 45.headtext2 { 46 font-size: 16px; 47 margin: -5px 0 0 0; 48} 49.header{ 50 width:100%; 51 overflow: hidden; 52 padding: 0; 53 margin: 0; 54} 55.contents{ 56 width:100%; 57 overflow: hidden; 58 display: flex; 59 margin: 0px 0px 0px 0px; 60 padding: 0px 0px; 61} 62.main { 63 z-index: 2; 64 } 65 66.kijibox{ 67 width:50%; 68 margin: 10px 10px 10px 10px; 69} 70 71.kita_side_nav{ 72 width:50%; 73 margin: 10px 10px 10px 10px; 74 border-left: 1px dotted; 75} 76 77.kiji_link span { 78 font-weight: bold; 79} 80.kiji_link a { 81 text-decoration: none; 82 color: black; 83} 84 85.link span { 86 font-weight: bold; 87} 88.link a{ 89 text-decoration: none; 90 color: black; 91} 92 93 94 95 * { 96 margin: 0; 97 padding: 0; 98 box-sizing: border-box; 99} 100.slide { 101 display: flex; 102 overflow: hidden; 103 width: 100%; 104} 105 106.slide ul { 107 list-style-type: none; 108 margin: 0; 109 padding: 0; 110 width: 100%; 111} 112 113.slide li { 114 position: relative; 115 margin-right: 0px; 116 float: left; 117 display: block; 118 transform: scale(1); 119} 120 121.slide li .active { 122 opacity: 1; 123 transform: scale(1.05); 124 height: auto; 125} 126 127.slide img { 128 display: block; 129 width: 100%; 130 height: 0px; 131 opacity: 0; 132 transition: opacity 1s ease-in-out, transform 6s ease-out; 133 object-fit: contain; 134} 135 136.text-overlay { 137 position: absolute; 138 bottom: 40%; 139 left: 50%; 140 transform: translate(-50%, -50%); 141 color: white; 142 font-size: 24px; 143 text-align: center; 144 max-width: 90%; 145 white-space: nowrap; 146 letter-spacing: 0.4em; 147 line-height: 2.3em; 148 font-family: serif; 149 font-weight: bold; 150} 151 152@media screen and (max-width:800px){ 153 .text-overlay { 154 font-size: 20px; 155 } 156} 157@media screen and (max-width:700px){ 158 .text-overlay { 159 font-size: 18px; 160 } 161} 162@media screen and (max-width:600px){ 163 .text-overlay { 164 font-size: 14px; 165 } 166} 167@media screen and (max-width:450px){ 168 .text-overlay { 169 font-size: 12px; 170 } 171 172} 173@media screen and (max-width:400px){ 174.text-overlay { 175 font-size: 9px; 176} 177} 178@media screen and (max-width:300px){ 179.text-overlay { 180 font-size: 7px; 181} 182} 183
js
1 let dsp1; 2 let dsp2; 3 4 window.addEventListener('load', function () { 5 viewSlide('.slide img'); 6 console.log("viewSlide function called"); 7 initSlide(); 8 }); 9 10 function viewSlide(className, slideNo = -1) { 11 let imgArray = document.querySelectorAll(className); 12 if (slideNo >= 0) { 13 imgArray[slideNo].classList.remove('active'); 14 } 15 slideNo++; 16 if (slideNo >= imgArray.length) { 17 slideNo = 0; 18 } 19 imgArray[slideNo].classList.add('active'); 20 setTimeout(function () { viewSlide(className, slideNo); }, 5000); 21 } 22 23 function initSlide() { 24 let elems = document.getElementsByTagName("p"); 25 for (let i = 0; i < elems.length; i++) { 26 elems[i].className = "before"; 27 } 28 dsp1 = false; 29 dsp2 = false; 30 }
試したこと・調べたこと
- teratailやGoogle等で検索した
- ソースコードを自分なりに変更した
- 知人に聞いた
- その他
上記の詳細・結果
cssのtransition: opacity 1s ease-in-out, transform 6s ease-out;の設定を変えても変化なし。
補足
特になし
回答1件
あなたの回答
tips
プレビュー