图片动画横条广告带上下滚动的JS代码

2023年6月11日上午1:45 • JavaScript

下面我来为你详细讲解如何实现“图片动画横条广告带上下滚动的JS代码”。

1. 准备工作

在开始编写代码之前，首先需要准备好以下内容：

在HTML页面中添加一个容器元素，以放置广告内容。
在CSS样式中，设置容器元素的宽度、高度和背景颜色。
准备好需要展示的广告图片，可以通过链接或直接将图片存放在本地。
编写JS代码来实现图片滚动效果。

2. 实现思路

要实现图片滚动效果，我们可以借助JavaScript中的setInterval()方法，定时更新图片的位置，并在到达滚动结束位置时重新开始滚动。整个实现思路可以分为以下几个步骤：

在HTML中添加一个容器元素。

html <div id="ad-container"></div>
在CSS中设置容器的样式，包括宽度、高度和背景颜色。

```css

ad-container {

width: 100%;
height: 150px;
background-color: #eee;
}
```
在JavaScript中，获取容器元素，并创建需要滚动的图片元素。

```javascript
// 获取容器元素
const adContainer = document.querySelector('#ad-container');

// 创建图片元素
const img1 = document.createElement('img');
img1.src = 'https://example.com/ad1.png';
const img2 = document.createElement('img');
img2.src = 'https://example.com/ad2.png';
const img3 = document.createElement('img');
img3.src = 'https://example.com/ad3.png';
```
使用数组来存储需要滚动的图片，设置起始位置和滚动结束位置。

javascript const adImgs = [img1, img2, img3]; // 存储图片的数组 let currIndex = 0; // 当前展示的图片索引 const startY = -150; // 图片滚动的起始位置 const endY = adImgs.length * 150; // 图片滚动的结束位置
定义一个滚动函数来更新图片的位置，处理滚动结束后的情况。

``javascript function scrollAd() { // 更新图片位置 adContainer.style.backgroundPosition =0 ${currIndex * -150}px`;
currIndex++;

// 判断是否到达滚动结束位置
if (currIndex === adImgs.length) {
currIndex = 0;
adContainer.style.backgroundPosition = 0 ${startY}px;
}
}
```
使用setInterval()方法来定时执行滚动函数，实现图片的滚动效果。

javascript setInterval(scrollAd, 3000); // 每3秒钟滚动一次

3. 示例说明

下面提供两个示例说明，分别演示了如何在HTML页面和React组件中实现图片动画横条广告带上下滚动的JS代码。

示例1：在HTML页面中实现

在HTML页面中，可以直接使用上述的代码来实现图片滚动效果。下面是一个完整的HTML代码示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>图片动画横条广告</title>
    <style>
      #ad-container {
        width: 100%;
        height: 150px;
        background-color: #eee;
      }
    </style>
  </head>
  <body>
    <div id="ad-container"></div>
    <script>
      const adContainer = document.querySelector('#ad-container');
      const img1 = document.createElement('img');
      img1.src = 'https://example.com/ad1.png';
      const img2 = document.createElement('img');
      img2.src = 'https://example.com/ad2.png';
      const img3 = document.createElement('img');
      img3.src = 'https://example.com/ad3.png';
      const adImgs = [img1, img2, img3];
      let currIndex = 0;
      const startY = -150;
      const endY = adImgs.length * 150;
      function scrollAd() {
        adContainer.style.backgroundPosition = `0 ${currIndex * -150}px`;
        currIndex++;
        if (currIndex === adImgs.length) {
          currIndex = 0;
          adContainer.style.backgroundPosition = `0 ${startY}px`;
        }
      }
      setInterval(scrollAd, 3000);
    </script>
  </body>
</html>

示例2：在React组件中实现

在React组件中，可以借助componentDidMount()生命周期函数，在组件挂载完毕后执行滚动函数。下面是一个完整的React组件代码示例：

import React, { Component } from 'react';

class AdBanner extends Component {
  componentDidMount() {
    const adContainer = document.querySelector('#ad-container');
    const img1 = new Image();
    img1.src = 'https://example.com/ad1.png';
    const img2 = new Image();
    img2.src = 'https://example.com/ad2.png';
    const img3 = new Image();
    img3.src = 'https://example.com/ad3.png';
    const adImgs = [img1, img2, img3];
    let currIndex = 0;
    const startY = -150;
    const endY = adImgs.length * 150;
    function scrollAd() {
      adContainer.style.backgroundPosition = `0 ${currIndex * -150}px`;
      currIndex++;
      if (currIndex === adImgs.length) {
        currIndex = 0;
        adContainer.style.backgroundPosition = `0 ${startY}px`;
      }
    }
    setInterval(scrollAd, 3000);
  }

  render() {
    return (
      <div id="ad-container"></div>
    );
  }
}

export default AdBanner;

在上述代码中，我们使用new Image()来创建图片元素，并通过componentDidMount()函数，在组件挂载后执行滚动函数。需要注意的是，在React组件中，我们需要使用backgroundPosition属性来设置背景图的位置。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：图片动画横条广告带上下滚动的JS代码 - Python技术站