Question

我有一个用户滚动翻译的图像。如果图像在特定位置停留超过3秒，则应将其替换为其他图像。

如果地方发生变化，应重置计数器。

var secondsUntilImageReplacement = 3,
    counter = 0;

if ( imagePosition == definedPosition ) {
   interval = setInterval(function() {
     if ( counter == secondsUntilImageReplacement ) {
       // Replace Image
     }
     ++counter;
   }, 1000);
}
else {
  window.clearInterval( interval );
  counter = 0;
}

不幸的是，代码不能像我想象的那样工作。如果我一旦到达definedPosition代码运行，即使我进一步滚动（将图像从definedPosition翻译出来）

我做错了什么？

Answer 1

不确定你想要什么。如果您提供小提琴或网站，建议使用。

我认为，如果用户正在滚动，请尝试匹配已定义位置的位置。如果您匹配此项，请在3秒后更换图像？

var images = [
  'https://image.pixelio.de/000/770/305//player/1--770305-Herbstsch%26ouml%3Bnheit-pixelio.jpg',
  'https://image.pixelio.de/000/770/304//player/1--770304-Weidek%26ouml%3Brbchen%20mit%20Herbstfr%26uuml%3Bchte-pixelio.jpg',
  'https://image.pixelio.de/000/770/229//player/1--770229-Fieber%3F-pixelio.jpg'
];

var index = 0;
// ...your scroll event...
//if ( imagePosition == definedPosition ) {

// this interval is for testing code...
setInterval(function() {
  index++;
  index = (index >= images.length) ? 0 : index; 
  
  setTimeout(function() {
    $('[data-change-image]').attr('src', images[index]);
  }, 3000);
}, 3000);
// end of if statement}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img data-change-image src="https://image.pixelio.de/000/770/305//player/1--770305-Herbstsch%26ouml%3Bnheit-pixelio.jpg" width="20%">

条件语句jQuery中的setInterval

1 个答案: