前提・実現したいこと
JavaScriptを使ったスライドの作成。
丸ボタンを押したときに任意のスライドに変更するために、押されたボタンのslide_button[i]のiを取得する方法を知りたい。
また、代替案またはアドバイスをいただきたい。
丸ボタンを押したときにslide_button[i]のiを取得して、
JavaScript
1slide_button[i].addEventListener('click',function(){) 2 var b = count; 3 count = i; 4 element[b].classList.remove('slider_change'); 5 slide_button[b].classList.remove('button_change'); 6 element[count].classList.add('slider_change'); 7 slide_button[count].classList.add('button_change'); 8});
上記で丸ボタンを押したときに、任意の色にスライドを変更をしようと考えています。
該当のソースコード
JavaScript
1window.onload = function(){ 2 var element = document.getElementsByClassName('slider_element'); 3 var slide_button = document.getElementsByClassName('slider_button'); 4 let count = 0; 5 6 function change(){ 7 if(count == 5){ 8 element[count - 1].classList.remove('slider_change'); 9 slide_button[count - 1].classList.remove('button_change'); 10 count = 0; 11 element[count].classList.add('slider_change'); 12 slide_button[count].classList.add('button_change'); 13 }else{ 14 if(count != 0){ 15 element[count - 1].classList.remove('slider_change'); 16 slide_button[count - 1].classList.remove('button_change'); 17 } 18 element[count].classList.add('slider_change'); 19 slide_button[count].classList.add('button_change'); 20 } 21 count++; 22 setTimeout(change,2000); 23 } 24 25 change(); 26} 27
HTML
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8"> 5 <link rel="stylesheet" href="./css/reset.css"> 6 <link rel="stylesheet" href="./css/slider_style.css"> 7 <title></title> 8 </head> 9 <body> 10 <div class="slider"> 11 <div class="slider_inner"> 12 <ul class="slider_elements"> 13 <li class="slider_element slider_change"> 14 <p style="background-color:#000;"></p> 15 </li> 16 <li class="slider_element"> 17 <p style="background-color:#f00;"></p> 18 </li> 19 <li class="slider_element"> 20 <p style="background-color:#0f0;"></p> 21 </li> 22 <li class="slider_element"> 23 <p style="background-color:#00f;"></p> 24 </li> 25 <li class="slider_element"> 26 <p style="background-color:#fff;"></p> 27 </li> 28 </ul> 29 <ul class="slider_button_area"> 30 <li> 31 <button type="button" class="slider_button button_change"></button> 32 </li> 33 <li> 34 <button type="button" class="slider_button"></button> 35 </li> 36 <li> 37 <button type="button" class="slider_button"></button> 38 </li> 39 <li> 40 <button type="button" class="slider_button"></button> 41 </li> 42 <li> 43 <button type="button" class="slider_button"></button> 44 </li> 45 </ul> 46 </div> 47 </div> 48 <script src="./js/slider.js"></script> 49 </body> 50</html>
CSS
1ul{ 2 list-style: none; 3} 4 5.slider{ 6 width: 100%; 7 height: 450px; 8 margin: 0 auto; 9} 10 11.slider_inner{ 12 width: 1500px; 13 height: 450px; 14 position: relative; 15 margin: 0 auto; 16} 17 18.slider_elements{ 19 width: 1500px; 20 height: 450px; 21 position: relative; 22} 23 24.slider_element{ 25 transition: 1s; 26 position: absolute; 27 opacity: 0; 28} 29 30.slider_element p{ 31 width: 1500px; 32 height: 450px; 33} 34 35.slider_change{ 36 transition: 1s; 37 opacity: 1; 38} 39 40 41 42.slider_button_area{ 43 width: 100%; 44 height: auto; 45 position: absolute; 46 bottom: 30px; 47 display: flex; 48 justify-content: center; 49 left: 50%; 50 margin-left: -750px; 51} 52 53.slider_button{ 54 width: 30px; 55 height: 30px; 56 background-color: #077; 57 border-radius: 50%; 58 margin:0 10px; 59 border-style: none; 60 outline: none; 61} 62 63.button_change{ 64 background-color: #770; 65} 66
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。