自動遅延スライドショーJqueryとHTMLスクリプト

Question

私はこのスクリプトを持っています。私は彼に自動化され、いくらかの遅れを持たせる方法が不思議です。 このスクリプトは私がキャプション付きスライドショーを作成したもので、画像とキャプションごとにボタンがあります。私はそれを少し遅れて自動化したい。ありがとう、良い一日を！

$("a.toggle1").click(function() { 
    $(".row1").fadeIn(); 
    $(".row2").hide(); 
    $(".row3").hide(); 
}); 

$("a.toggle1").click(function() { 
    $('#main-slide').css("background", "url(bg2.png)"); 
}); 


$("a.toggle2").click(function() { 
    $(".row2").fadeIn(); 
    $(".row1").hide(); 
    $(".row3").hide(); 
}); 

$("a.toggle2").click(function() { 
    $('#main-slide').css("background", "url(bg1.jpg)"); 
}); 


$("a.toggle3").click(function() { 
    $(".row3").fadeIn(); 
    $(".row1").hide(); 
    $(".row2").hide(); 
}); 

$("a.toggle3").click(function() { 
    $('#main-slide').css("background", "url(bg3.jpg)"); 
}); 



<li class="active"><a href="#" class="toggle1"><i class="fa fa-plus"></i>Slide 1</a></li> 
<li class="active"><a href="#" class="toggle2"><i class="fa fa-plus"></i>Slide 2</a></li> 
<li class="active"><a href="#" class="toggle3"><i class="fa fa-plus"></i>Slide 3</a></li> 

    <div id="main-slide" class="visible"> 
      <div class="content"> 

      <div id="row" class="row1" style="display:block;"> 
      <h1>Lorem Ipsum</h1> 
      <p>Lorem Ipsum</p> 
      </div> 

      <div id="row" class="row2" style="display:none;"> 
      <h1>Lorem Ipsum</h1> 
      <p>Lorem Ipsum</p> 
      </div> 

      <div id="row" class="row3" style="display:none;"> 
      <h1>Lorem Ipsum</h1> 
      <p>Lorem Ipsum</p> 
      </div> 


      </div></div> 

Answer 1

次のスニペットを試してください。

$("a.toggle1").click(function() { 
 
    $(".row1").delay(1000).fadeIn(3000); 
 
    $(".row2").hide(); 
 
    $(".row3").hide(); 
 
}); 
 

 
$("a.toggle1").click(function() { 
 
    $('#main-slide').css("background", "url(https://www.w3schools.com/html/pic_mountain.jpg)"); 
 
}); 
 

 

 
$("a.toggle2").click(function() { 
 
    $(".row2").delay(1000).fadeIn(); 
 
    $(".row1").hide(); 
 
    $(".row3").hide(); 
 
}); 
 

 
$("a.toggle2").click(function() { 
 
    $('#main-slide').css("background", "url(https://www.w3schools.com/html/html5.gif)"); 
 
}); 
 

 

 
$("a.toggle3").click(function() { 
 
    $(".row3").delay(1000).fadeIn(); 
 
    $(".row1").hide(); 
 
    $(".row2").hide(); 
 
}); 
 

 
$("a.toggle3").click(function() { 
 
    $('#main-slide').css("background", "url(https://www.w3schools.com/images/w3schools_green.jpg)"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> 
 
<li class="active"><a href="#" class="toggle1"><i class="fa fa-plus"></i>Slide 1</a></li> 
 
<li class="active"><a href="#" class="toggle2"><i class="fa fa-plus"></i>Slide 2</a></li> 
 
<li class="active"><a href="#" class="toggle3"><i class="fa fa-plus"></i>Slide 3</a></li> 
 

 
    <div id="main-slide" class="visible"> 
 
      <div class="content"> 
 

 
      <div id="row" class="row1" style="display:block;"> 
 
      <h1>Lorem Row 1</h1> 
 
      <p>Lorem Ipsum</p> 
 
      </div> 
 

 
      <div id="row" class="row2" style="display:none;"> 
 
      <h1>Lorem Row 2</h1> 
 
      <p>Lorem Ipsum</p> 
 
      </div> 
 

 
      <div id="row" class="row3" style="display:none;"> 
 
      <h1>Lorem Row 3</h1> 
 
      <p>Lorem Ipsum</p> 
 
      </div> 
 

 

 
      </div></div>