html广告屏滚动带加载

实现滚动广告条的常用方式有两种：使用CSS动画或JavaScript控制元素滚动。其中，使用JavaScript控制元素滚动可以更加灵活地实现带加载的滚动广告条效果。

下面是一个使用JavaScript实现带加载的滚动广告条的示例代码：

HTML代码：

<div id="ad-container">
  <div id="ad-list">
    <img src="ad1.jpg" alt="广告图1">
    <img src="ad2.jpg" alt="广告图2">
    <img src="ad3.jpg" alt="广告图3">
  </div>
</div>

CSS代码：

#ad-container {
  width: 600px;
  height: 200px;
  overflow: hidden;
  position: relative;
}

#ad-list {
  position: absolute;
}

#ad-list img {
  width: 600px;
  height: 200px;
  display: block;
  float: left;
}

JavaScript代码：

var adContainer = document.getElementById('ad-container');
var adList = document.getElementById('ad-list');
var adItems = adList.getElementsByTagName('img');
var adIndex = 0;
var adInterval = 3000; // 广告切换间隔时间，单位为毫秒
var adTimer;

function switchAd() {
  adIndex = (adIndex + 1) % adItems.length;
  adList.style.left = -adIndex * adContainer.offsetWidth + 'px';
  // 如果是最后一个广告图，预加载下一个广告图
  if (adIndex === adItems.length - 1) {
    var nextImage = new Image();
    nextImage.src = adItems[0].src;
  }
}

function startAd() {
  adTimer = setInterval(switchAd, adInterval);
}

function stopAd() {
  clearInterval(adTimer);
}

startAd();

解释：

1. `adContainer`表示广告容器元素，`adList`表示广告列表元素，`adItems`表示广告列表中的广告项（图片）。
2. `adIndex`变量表示当前显示的广告图的索引，初始值为0。
3. `adInterval`变量表示广告切换间隔时间，初始值为3000毫秒（3秒）。
4. `switchAd`函数用于切换广告图。首先将`adIndex`加1，再对广告图数量取模，得到下一个要显示的广告图的索引，然后将广告列表元素向左移动一个广告图的宽度（即`adContainer.offsetWidth`），从而显示下一个广告图。
5. 如果当前显示的广告图是最后一个广告图，那么预加载下一个广告图，避免在切换到下一个广告图时出现闪烁。
6. `startAd`函数用于启动广告轮播，使用`setInterval`函数定时调用`switchAd`函数。
7. `stopAd`函数用于停止广告轮播，使用`clearInterval`函数清除定时器。
8. 在页面加载完成后，调用`startAd`函数启动广告轮播。

这个示例代码中使用了预加载的技巧，在广告条滑动到最后一张图时，预先加载下一张图，以提高用户体验。当然，如果你的广告图数量不是很多，可以不必使用预加载，直接循环播放即可。