用 mousemove 调整翻阅一组图像的速度

Question

我在移动鼠标时正在翻阅一组图像。图像应以随机顺序翻转。但是变化本身实在是太快了，现在好像每一个像素都在变化。

我尝试使用简单的if 条件调整速度，但似乎不起作用。

我的代码如下所示：

var slideshow = $(".introImages");
var images = $(".introImages img");
var pos = { x: 0, y: 0 };

$(slideshow).on("mousemove", function(event) {
  var x = event.pageX;
  var width = this.offsetWidth;

  var percentage = x / width;
  var random = Math.random(percentage);
  var imageNumber = Math.floor(random * images.length);

  if (
    event.pageX > pos.x + 100 ||
    event.pageY > pos.y + 100 ||
    event.pageY < pos.y - 100 ||
    event.pageX < pos.x - 100
  ) {
    $(images).each(function(image) {
      $(this).css("z-index", 0);
    });
    $(images)
      .eq(imageNumber)
      .css("z-index", 1);
  }
});

*,
html,
body {
  margin: 0;
}

.introImages {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: block;
}

.introImages img {
  display: block;
  object-fit: cover;
  width: 100%;
  height: 100%;
  z-index: 0;
  position: absolute;
  left: 0;
  top: 0;
}

.intrImages:first-child {
  z-index: 1;
}

<div class="introImages">
	<img src="https://images.unsplash.com/photo-1563028327-1920b5a8d868?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=900&q=60">
  <img src="https://images.unsplash.com/photo-1556227703-ab57dbc6f839?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=900&q=60">
  <img src="https://images.unsplash.com/photo-1562960203-b4b41a48a1a1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=900&q=60">
  <img src="https://images.unsplash.com/photo-1559501418-12357e4cf8fd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=900&q=60">
  <img src="https://images.unsplash.com/photo-1561015477-1c907845c96b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=900&q=60">
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

您可以观看现场演示here。

Answer 1

您可以设置transitions 以延迟更改。延迟 1 秒的示例：

        var slideshow = $(".introImages");
var images = $(".introImages img");
var pos = { x: 0, y: 0 };

$(slideshow).on("mousemove", function(event) {
  var x = event.pageX;
  var width = this.offsetWidth;

  var percentage = x / width;
  var random = Math.random(percentage);
  var imageNumber = Math.floor(random * images.length);

  if (
    event.pageX > pos.x + 100 ||
    event.pageY > pos.y + 100 ||
    event.pageY < pos.y - 100 ||
    event.pageX < pos.x - 100
  ) {
    $(images).each(function(image) {
      $(this).css("z-index", 0);
    });
    $(images)
      .eq(imageNumber)
      .css("z-index", 1);
  }
});

*,html,body {
  margin: 0;
}

.introImages {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: block;
}

.introImages img {
  display: block;
  object-fit: cover;
  width: 100%;
  height: 100%;
  z-index: 0;
  position: absolute;
  left: 0;
  top: 0;
  -webkit-transition: z-index 1s;
  transition: z-index 1s;  
}

.intrImages:first-child {
  z-index: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="introImages">
	<img src="https://images.unsplash.com/photo-1563028327-1920b5a8d868?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=900&q=60">
  <img src="https://images.unsplash.com/photo-1556227703-ab57dbc6f839?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=900&q=60">
  <img src="https://images.unsplash.com/photo-1562960203-b4b41a48a1a1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=900&q=60">
  <img src="https://images.unsplash.com/photo-1559501418-12357e4cf8fd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=900&q=60">
  <img src="https://images.unsplash.com/photo-1561015477-1c907845c96b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=900&q=60">
</div>