javascriptで、三枚の画像を右外枠⇨正面⇨左外枠の流れをループさせたいです。現時点で三枚の画像を左外枠まで出せましたが、その後また最初の流れに

一枚目の初期位置は最初正面として、現時点で三枚の画像を左外枠まで出せましたが、その後また最初の流れに持っていくのにループさせたいで。

HTML

<div class="slidshow_wrapper">
        <ul class="slide_1">
        </ul>
</div>

CSS

.slide_1{
  width: 100vw;
  height: 100vh;
  position: relative;
}
.slide_1 li img{
  width: 100vw;
  height: 100vh;
}
.slide_1__li{
/*右に隠れている状態*/
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  margin-left: 100vw;
}
.show_1{
/*正面に出てくる*/
  margin: 0;
  transition: 0.5s;
  transition-timing-function: ease;
}
.slide_move{
/*左にスライドアウト*/
  margin-left: -100vw;
  transition: 0.5s;
  transition-timing-function: ease;
}

JavaScript

// slide_show
var slide_1 = [
  "images/slide/top_slide_1.png",
  "images/slide/top_slide_2.png",
  "images/slide/top_slide_3.png"
];

for (var i = 0; i < slide_1.length; i++){
  // slide_1の中にliを作りliの中に画像を格納
  var slide = document.createElement("li");
  slide.innerHTML = "<img src='"+ slide_1[i] +"'>";
  document.getElementsByClassName('slide_1')[0].appendChild(slide);
  //li(画像)の１番目にshow_1というクラスを与える
  var imageSlide_1 = document.getElementsByClassName("slide_1")[0].getElementsByTagName("li");
  var nowIndex = 0;
  imageSlide_1[nowIndex].classList.add("show_1");
  //slide_1のliのそれぞれクラスを与える
  document.getElementsByClassName("slide_1")[0].getElementsByTagName("li")[i].classList.add('slide_1__li');
};

// スライド1枚目をスライドアウト&二枚目をスライドイン
function slide_class_add(){
  document.getElementsByClassName("show_1")[0].classList.add("slide_move");
  document.getElementsByClassName("slide_1")[0].getElementsByTagName("li")[1].classList.add("show_1");
};
setTimeout("slide_class_add()",4000);
// スライド2枚目をスライドアウト&3枚目をスライドイン
function slide_class_add_2(){
  document.getElementsByClassName("show_1")[1].classList.add("slide_move");
  document.getElementsByClassName("slide_1")[0].getElementsByTagName("li")[2].classList.add("show_1");
};
setTimeout("slide_class_add_2()",8000);
// 3枚目をスライドイン
function slide_class_add_3(){
  document.getElementsByClassName("show_1")[2].classList.add("slide_move");
};
setTimeout("slide_class_add_3()",10000);
// 一枚め二枚目をスライド前の位置へ戻す
function slide_class_remove(){
  document.getElementsByClassName("slide_1")[0].getElementsByTagName('li')[0].classList.remove("show_1");
  document.getElementsByClassName("slide_1")[0].getElementsByTagName('li')[0].classList.remove("slide_move");
  document.getElementsByClassName("slide_1")[0].getElementsByTagName('li')[1].classList.remove("show_1");
  document.getElementsByClassName("slide_1")[0].getElementsByTagName('li')[1].classList.remove("slide_move");
};
setTimeout("slide_class_remove()",11000);
// 三枚目も初期位置に戻したのち一枚目をスライドインさせる、この一連の流れをループさせたい。。。

kei344

2020/06/15 15:28

（質問文は編集できます）「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを、出ているエラーなどと併せて、具体的に記述されたほうが回答を得られやすいと思います。

ShojiroAbe

2020/06/15 15:37

直させて頂きました！

行動規範の内容に同意します

回答1件

ベストアンサー

それぞれの関数の最後で次の関数を呼び出し、最後の関数で最初の関数を呼び出せばいいかと思います。
サンプル

js
1// スライド1枚目をスライドアウト&二枚目をスライドイン
2function slide_class_add(){
3  document.getElementsByClassName("show_1")[0].classList.add("slide_move");
4  document.getElementsByClassName("slide_1")[0].getElementsByTagName("li")[1].classList.add("show_1");
5  setTimeout("slide_class_add_2()",4000);
6};
7
8// スライド2枚目をスライドアウト&3枚目をスライドイン
9function slide_class_add_2(){
10  document.getElementsByClassName("show_1")[1].classList.add("slide_move");
11  document.getElementsByClassName("slide_1")[0].getElementsByTagName("li")[2].classList.add("show_1");
12  setTimeout("slide_class_add_3()",4000);
13};
14// 3枚目をスライドイン
15function slide_class_add_3(){
16  document.getElementsByClassName("show_1")[2].classList.add("slide_move");
17  slide_class_remove();
18};
19// 一枚め二枚目をスライド前の位置へ戻す
20function slide_class_remove(){
21  document.getElementsByClassName("slide_1")[0].getElementsByTagName('li')[0].classList.remove("show_1");
22  document.getElementsByClassName("slide_1")[0].getElementsByTagName('li')[0].classList.remove("slide_move");
23  document.getElementsByClassName("slide_1")[0].getElementsByTagName('li')[1].classList.remove("show_1");
24  document.getElementsByClassName("slide_1")[0].getElementsByTagName('li')[1].classList.remove("slide_move");
25  imageSlide_1[nowIndex].classList.add("show_1");
26  setTimeout("slide_class_add()",4000);
27};
28// 三枚目も初期位置に戻したのち一枚目をスライドインさせる、この一連の流れをループさせたい。。。
29  setTimeout("slide_class_add()",4000);