自動延時幻燈片jQuery和HTML腳本

我有這個劇本，我真的不知道如何讓他自動並有一定的延遲。這個腳本是由我製作的帶有標題的幻燈片，他有每個圖像和標題的按鈕。我想讓它自動延遲一段時間。謝謝，祝你有美好的一天！自動延時幻燈片jQuery和HTML腳本

$("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>

來源

2017-06-24 Bogdan CreativeVisuals

添加時間間隔，以淡入功能，如淡入（200），其中200是在毫秒的時間。 –

什麼也沒有發生 –

你在這裏檢查答案[https://stackoverflow.com/questions/5357827/jquery-slideshow-with-different-delay-times] –

嘗試下面的代碼段;

$("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>

來源

2017-06-24 16:30:34

這是延遲，但如何使它自動？ –

您希望滑塊使用點擊事件。 –

但是有機會讓它成爲自動？ –

自動延時幻燈片jQuery和HTML腳本

回答

相關問題