滚动照片抽奖js(代码示例)

滚动照片抽奖是一种常见的网页交互效果，它可以通过滚动显示一系列图片，然后在停止滚动时随机选取一张图片作为抽奖的结果。实现这个效果需要使用JavaScript来操作DOM元素和控制动画。

我们需要定义一个包含所有待抽奖图片的数组。然后，通过JavaScript代码来实现滚动效果。我们可以使用CSS的transform属性来实现平滑滚动的动画效果。我们需要一个外层容器来包裹所有的图片，然后设置其样式为overflow:hidden，以隐藏超出容器的部分。接下来，我们可以使用CSS的transition属性来设置动画过渡效果，使滚动更加平滑。

<div class="ab5a-0787-b5e7-6291 photo-container">
  <img src="photo1.jpg" alt="photo1">
  <img src="photo2.jpg" alt="photo2">
  <img src="photo3.jpg" alt="photo3">
  <!-- more images... -->
</div>

接下来，我们需要编写JavaScript代码来实现滚动效果。我们需要获取到包含所有图片的容器元素，然后获取到所有的图片元素。我们可以使用querySelector和querySelectorAll方法来获取元素。然后，我们可以使用CSS的transform属性来实现滚动效果。我们可以通过改变容器元素的translateY属性的值来实现垂直滚动。我们可以使用JavaScript的setInterval方法来定时改变translateY的值，以实现滚动效果。

const container = document.querySelector('.photo-container');
const images = document.querySelectorAll('.photo-container img');
let translateY = 0;
setInterval(() => {
  translateY -= 100; // 每次滚动100像素
  container.style.transform = `translateY(${translateY}px)`;
}, 1000); // 每隔1秒滚动一次

我们需要在停止滚动时随机选取一张图片作为抽奖结果。我们可以使用JavaScript的Math.random方法生成一个随机数，然后根据随机数来确定选取的图片索引。我们可以使用Math.floor方法将随机数取整，然后使用images数组的长度来限制随机数的范围。

const container = document.querySelector('.photo-container');
const images = document.querySelectorAll('.photo-container img');
let translateY = 0;
setInterval(() => {
  translateY -= 100; // 每次滚动100像素
  container.style.transform = `translateY(${translateY}px)`;
}, 1000); // 每隔1秒滚动一次
setTimeout(() => {
  const randomIndex = Math.floor(Math.random() * images.length);
  const selectedImage = images[randomIndex];
  // 在这里可以根据选取的图片做进一步的处理，比如显示中奖结果
}, 5000); // 5秒后停止滚动并选取中奖图片

通过以上的代码示例，我们可以实现一个简单的滚动照片抽奖效果。当页面加载后，图片会每隔1秒向上滚动100像素，然后在5秒后停止滚动并随机选取一张图片作为中奖结果。