Question

我正在尝试使用javascript递归函数在我的网站上延迟地递归更改图像。这是我的js代码：

    const ns = 0;
    carousel(ns);
    
    function carousel(n) {
        if(n < 0 || n > 3){
            n = 0;
        }
        var x = document.getElementsByClassName("cooperation-ovalImg");
        x[0].src = "Images/cooperation/Oval_1.1.png";
        x[1].src = "Images/cooperation/Oval_2.1.png";
        x[2].src = "Images/cooperation/Oval_3.1.png";
        n++;
        if (n > x.length) {n = 1}
        x[n-1].src = "Images/cooperation/Oval_"+n+".png";
        setTimeout(carousel(n), 5000); // Change image every 2 seconds
    }

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <link rel="stylesheet" type="text/css" href="css/main.css">
        <link rel="stylesheet" type="text/css" href="css/test-header.css">
        <link rel="stylesheet" type="text/css" href="css/about-us.css">
        <link rel="stylesheet" type="text/css" href="css/our-projects.css">
        <link rel="stylesheet" type="text/css" href="css/cooperation.css">
        <title>Pecode Software | IT company</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    
    </head >


    <div class="row row-14">
                    <div class="col-xs-10 col-xs-offset-2">
                        <img class="cooperation-ovalImg cooperation-ovalImg-1 cooperation-oval-1" src="Images/cooperation/Oval_1.1.png" alt="">
                        <img class="cooperation_line" src="Images/cooperation/Lin.svg" alt="">
                        <img class= "cooperation-ovalImg cooperation-oval-2" src="Images/cooperation/Oval_2.1.png" alt="">
                        <img class="cooperation_line" src="Images/cooperation/Lin.svg" alt="">
                        <img class= "cooperation-ovalImg cooperation-oval-3" src="Images/cooperation/Oval_3.1.png" alt="">
                    </div>
                </div>

我希望将来使用 n 参数来通过除自动更改之外的单击来更改图像。

但是有一个问题：环境告诉我：

函数“轮播”以递归方式无限运行，并且只能通过引发异常来结束

运行页面时，脚本不起作用；显示第一个图像3，并且它是点更改。

Answer 1

您应该使用interval而不是超时。您的环境告诉您，无法退出该功能。不好的做法。

您应该改用以下方式：

var myinterval;

myinterval = setInterval(function(){
    // myFunction(params)
}, 5000);

function myFunction(params){
    // Your stuff in here
}

// To exit or finish your stuff you will call
/* clearInterval(myinterval); */

Answer 2

请尝试此操作...您必须从轮播功能中删除超时功能并将其粘贴到代码的开头...如下所示...

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<span data-toggle="collapse" data-target="#jackText,#jackButton">
  <button type="button" data-toggle="modal" data-target="#myModal">
    Btn 1
  </button>
</span>

<span data-toggle="collapse" data-target="#jillText,#jillButton">
  <button type="button" data-toggle="modal" data-target="#myModal">
    Btn 2
  </button>
</span>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <div id="jackButton" class="collapse">
          <button type="button" class="close" data-toggle="collapse" data-target="#jackText,#jackButton" data-dismiss="modal" aria-hidden="true">&times;</button>
        </div>
        <div id="jillButton" class="collapse">
          <button type="button" class="close" data-toggle="collapse" data-target="#jillText,#jillButton" data-dismiss="modal" aria-hidden="true">&times;</button>
        </div>
        <h4 class="modal-title">"Hello Jack" or "Hello Jill"?</h4>
      </div>
      <div class="modal-body">
        <div id="jackText" class="collapse">
          Hello Jack
        </div>
        <div id="jillText" class="collapse">
          Hello Jill
        </div>
      </div>
    </div>
  </div>
</div>

Answer 3

$(document).ready(function(){
var elements = $(".cooperation-ovalImg");

var photos = [
  'https://www.countryflags.io/be/flat/64.png',
  'https://www.countryflags.io/lk/flat/64.png',
  'https://www.countryflags.io/us/flat/64.png',
  'https://www.countryflags.io/in/flat/64.png',
  'https://www.countryflags.io/jp/flat/64.png',
  'https://www.countryflags.io/aq/flat/64.png',
  ];
  
var i = 0;

window.setInterval(function(){
 var index = i%photos.length;
 i++;
 // Looping over every element
 elements.each(function(j){
    // Now j is the index of the loop
   // Decreesing if value is higher than photos
   if(index+j>photos.length-1) index = 0-j;
   // Setting src
   $(this).attr('src',photos[index+j]);
 })
},2000)

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="cooperation-ovalImg">
<img class="cooperation-ovalImg">
<img class="cooperation-ovalImg">

这是一个示例回旋曲

javascript递归更改图像

3 个答案: