JS实现div内部的文字或图片自动循环滚动代码

实现div内部的文字或图片自动循环滚动，可以使用JavaScript来实现。下面是实现的完整攻略：

1. 准备工作

首先需要一个包含滚动内容的div容器，例如：

<div id="scroll-container">
  <ul>
    <li><img src="img1.jpg" alt="图片1"></li>
    <li><img src="img2.jpg" alt="图片2"></li>
    <li><img src="img3.jpg" alt="图片3"></li>
  </ul>
</div>

2. 实现滚动效果

使用JavaScript实现滚动效果，可以通过动态改变容器的scrollTop属性来实现。例如：

// 获取滚动容器和需要滚动的元素
let container = document.getElementById('scroll-container');
let items = container.getElementsByTagName('li');
let currentItemIndex = 0;

// 定时器函数，每隔一定时间就执行一次滚动
function scroll() {
  // 计算下一个需要滚动的元素的位置
  let nextItemIndex = currentItemIndex + 1;
  if (nextItemIndex >= items.length) {
    nextItemIndex = 0;
  }

  // 计算下一个需要滚动的元素距离容器顶部的距离
  let nextItemTop = items[nextItemIndex].offsetTop;

  // 动态改变容器的scrollTop属性，实现滚动效果
  container.scrollTop = nextItemTop;

  // 更新当前滚动元素的索引
  currentItemIndex = nextItemIndex;
}

// 设置定时器，每隔一定时间执行一次scroll函数
setInterval(scroll, 2000);

3. 示例说明

示例1：文字滚动效果

<div id="scroll-container">
  <ul>
    <li>第一条滚动文字</li>
    <li>第二条滚动文字</li>
    <li>第三条滚动文字</li>
  </ul>
</div>

<script>
let container = document.getElementById('scroll-container');
let items = container.getElementsByTagName('li');
let currentItemIndex = 0;

function scroll() {
  let nextItemIndex = currentItemIndex + 1;
  if (nextItemIndex >= items.length) {
    nextItemIndex = 0;
  }

  let nextItemTop = items[nextItemIndex].offsetTop;

  container.scrollTop = nextItemTop;

  currentItemIndex = nextItemIndex;
}

setInterval(scroll, 2000);
</script>

示例2：图片滚动效果

<div id="scroll-container">
  <ul>
    <li><img src="img1.jpg" alt="图片1"></li>
    <li><img src="img2.jpg" alt="图片2"></li>
    <li><img src="img3.jpg" alt="图片3"></li>
  </ul>
</div>

<script>
let container = document.getElementById('scroll-container');
let items = container.getElementsByTagName('li');
let currentItemIndex = 0;

function scroll() {
  let nextItemIndex = currentItemIndex + 1;
  if (nextItemIndex >= items.length) {
    nextItemIndex = 0;
  }

  let nextItemTop = items[nextItemIndex].offsetTop;

  container.scrollTop = nextItemTop;

  currentItemIndex = nextItemIndex;
}

setInterval(scroll, 2000);
</script>