jQuery实现广告条滚动效果

实现广告条滚动效果的方法有很多，下面我们介绍一种使用jQuery实现的方法。

步骤1：HTML结构

首先，在HTML文件中创建一个包含部分广告的容器，它可以包含多个广告。例如：

<div class="ad-container">
  <div class="ad-item">广告1</div>
  <div class="ad-item">广告2</div>
  <div class="ad-item">广告3</div>
  <div class="ad-item">广告4</div>
  <div class="ad-item">广告5</div>
</div>

以上代码定义了一个类名为ad-container的容器，容器里包含了5个广告，每个广告使用类名为ad-item进行标识。

步骤2：CSS样式

接下来，需要为容器ad-container和广告ad-item定义CSS样式。例如：

.ad-container {
  overflow: hidden;
  height: 40px;
}

.ad-item {
  float: left;
  margin-right: 20px; /* 广告之间的间距 */
  padding: 5px;
  background: #eee;
}

以上CSS样式定义了广告容器的高度和溢出后隐藏的属性，并且为广告定义了浮动和间距。

步骤3：JavaScript代码

接下来，需要使用jQuery来编写滚动效果的JavaScript代码。

$(function() {
  // 等待DOM加载完成后执行以下代码

  var containerWidth = $('.ad-container').width();  // 广告容器的宽度
  var adCount = $('.ad-item').length;  // 广告的数量
  var currentAd = 0;  // 当前广告的索引

  // 复制第一个广告，并添加到容器尾部
  $('.ad-container').append($('.ad-item').eq(0).clone());

  // 重复定时滚动广告
  setInterval(function() {
    if (currentAd == adCount) {  // 最后一个广告已经显示过，重置为第一个广告
      $('.ad-container').css('left', 0);
      currentAd = 0;
    }
    $('.ad-container').animate({left: '-=' + (containerWidth + 20)}, 500);
    currentAd ++;
  }, 2000);
});

以上代码中，首先使用$()函数等待DOM加载完成后执行相关代码。接着获取广告容器的宽度、广告的数量和当前广告的索引。接下来，使用clone()方法复制第一个广告，并添加到容器的尾部。最后，使用setInterval()方法定时循环滚动广告。在滚动时，首先判断当前展示的是否为最后一个广告，如果是，则回到第一个广告并且设置currentAd变量为0。接着使用animate()方法，驱动容器向左滑动一个广告宽度和间距的距离，展示下一个广告。

示例1

下面是一个在线示例，展示了滚动广告的效果：jQuery实现广告条滚动效果 示例1

示例2

下面是另一个在线示例，展示了滚动广告的效果并且添加了鼠标悬停暂停的功能：jQuery实现广告条滚动效果 示例2