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>

Answer 2

您可以使用以下代码：

$(document).ready(function(){
	var slideindex;
	function showsilde(){
  	var i, j;
  	var c = $('#silde-show').find('.img-select');
    var d = $('#inline-dot').find('.dot');
   	for(i=0,  lg = c.length; i < lg; i++ ){
    	c[i].style.display = "none";
    }
    for(j=0,  ln = d.length; j < ln; j++ ){
    	d[j].style.background = "#bbb";
    }
    c[slideindex].style.display = "block";
    d[slideindex].style.background = "#000";
    slideindex++;
    if(slideindex > c.length-1 ){
    	slideindex = 0;
    }
    setTimeout(showsilde,1000);
    d.click(function(){
    	slideindex = $(this).val();
    })
  }
  showsilde(slideindex = 0);
});

#silde-show{
  position: relative;
  text-align: center;
}
#inline-dot{text-align:center;}
.dot{
  cursor:pointer;
  height: 13px;
  width: 13px;
  margin: 0 2px;
  background-color: #bbb;
  border: none;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
  }
  .active{
    background-color: #000;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="silde-show">
  <div class="img-select">
    <img src="https://freetuts.net/upload/tut_post/images/2017/07/30/964/slide-1.jpg"width="300px" />
  </div>
   <div class="img-select">
    <img src="https://freetuts.net/upload/tut_post/images/2017/07/30/964/slide-2.jpg" width="300px" />
  </div>
   <div class="img-select">
    <img src="https://freetuts.net/upload/tut_post/images/2017/07/30/964/slide-3.jpg" width="300px" />
  </div>
</div>
<div id="inline-dot">
  <button type="button" class = "dot" value = '0'></button>
  <button type="button" class = "dot" value = '1'></button>
  <button type="button" class = "dot" value = '2'></button>

</div>

enter link description here

自动延迟幻灯片Jquery和HTML脚本

2 个答案: