文章/答案/技术大牛

发布

社区首页 >问答首页 >制作每1秒更改一次图像的滑块

问制作每1秒更改一次图像的滑块
EN

Stack Overflow用户

提问于 2019-11-19 23:04:01

回答 3查看 45关注 0票数 0

我做了一个每隔1秒就会改变图像的滑块，但我不知道如何让if语句循环，图像只是停留在我试图用while和for循环的第一张幻灯片上，但我不能让它工作。你能帮我一下吗？)

const images = [
    "https://www.travelercar.com/wp-content/uploads/2016/04/4a36e314016aa914f203ea6b7d579dc6_large.jpeg",
    "https://lemag.nikonclub.fr/wp-content/uploads/2017/07/08.jpg",
    "https://www.yourvalleynews.co.uk/wp-content/uploads/2018/03/pic-outside-1080x675.jpg",

  ];

var counter = 0;

setInterval (function() {
        if (counter >= 2 ){
            document.getElementById("currentImage").src = images[counter-2];

        }
        else if (images[0]){
            document.getElementById("currentImage").src = images[++counter];  
        };
}, 1000);

<head>
  <meta charset="utf-8">

  <title>Intitulé de ma page</title>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="style.css">
  <style>

  </style>
</head>

<body>
  <div style="width: 60%; margin: auto;">
    <div id="exemple1" name="slide" style="display: flex;">
      <!-- image container -->
      <img src="https://www.travelercar.com/wp-content/uploads/2016/04/4a36e314016aa914f203ea6b7d579dc6_large.jpeg" id="currentImage" height="300" />
    </div>
  </div>



  <script src="script.js"></script>
</body>

javascript

loops

slider

回答 3

Stack Overflow用户

发布于 2019-11-19 23:14:29

当条件为counter>=2时，您不能更改counter变量。

const images = [
    "https://www.travelercar.com/wp-content/uploads/2016/04/4a36e314016aa914f203ea6b7d579dc6_large.jpeg",
    "https://lemag.nikonclub.fr/wp-content/uploads/2017/07/08.jpg",
    "https://www.yourvalleynews.co.uk/wp-content/uploads/2018/03/pic-outside-1080x675.jpg",

  ];

var counter = 0;

setInterval (function() {
        if (counter >= 2 ){
        counter -= 1; // modify the counter variable
            document.getElementById("currentImage").src = images[counter];
        }
        else if (images[0]){
            document.getElementById("currentImage").src = images[++counter];  
        };
}, 1000);

<head>
  <meta charset="utf-8">

  <title>Intitulé de ma page</title>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="style.css">
  <style>

  </style>
</head>

<body>
  <div style="width: 60%; margin: auto;">
    <div id="exemple1" name="slide" style="display: flex;">
      <!-- image container -->
      <img src="https://www.travelercar.com/wp-content/uploads/2016/04/4a36e314016aa914f203ea6b7d579dc6_large.jpeg" id="currentImage" height="300" />
    </div>
  </div>
</body>

票数 0

Stack Overflow用户

发布于 2019-11-19 23:18:21

我已经创建了这个代码片段，这样您就可以在数组中拥有任意数量的图像。

const images = [
    "https://www.travelercar.com/wp-content/uploads/2016/04/4a36e314016aa914f203ea6b7d579dc6_large.jpeg",
    "https://lemag.nikonclub.fr/wp-content/uploads/2017/07/08.jpg",
    "https://www.yourvalleynews.co.uk/wp-content/uploads/2018/03/pic-outside-1080x675.jpg"];
    
let count = 0;

const displayImage = () => {  
  document.getElementById("currentImage").src = images[count];
  if( count >= (images.length-1)) count = 0;
  else count++;
}

setInterval( displayImage, 1000 );

<img src="" id="currentImage" />

票数 0

Stack Overflow用户

发布于 2019-11-19 23:20:32

这是一个使用递归的工作示例。

const images = [
    "https://www.travelercar.com/wp-content/uploads/2016/04/4a36e314016aa914f203ea6b7d579dc6_large.jpeg",
    "https://lemag.nikonclub.fr/wp-content/uploads/2017/07/08.jpg",
    "https://www.yourvalleynews.co.uk/wp-content/uploads/2018/03/pic-outside-1080x675.jpg",

  ];
var sliderElement =  document.getElementById("currentImage");

(function slider(counter, len){
  sliderElement.src = images[counter];
  counter ++;
  if(len === counter){
    counter = 0;
  }
  setTimeout(slider, 1000, counter, len);
  
  
})(0, images.length);

<head>
  <meta charset="utf-8">

  <title>Intitulé de ma page</title>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="style.css">
  <style>

  </style>
</head>

<body>
  <div style="width: 60%; margin: auto;">
    <div id="exemple1" name="slide" style="display: flex;">
      <!-- image container -->
      <img src="https://www.travelercar.com/wp-content/uploads/2016/04/4a36e314016aa914f203ea6b7d579dc6_large.jpeg" id="currentImage" height="300" />
    </div>
  </div>
</body>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/58937015

复制

相似问题

问制作每1秒更改一次图像的滑块
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问制作每1秒更改一次图像的滑块EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问制作每1秒更改一次图像的滑块
EN