html js 图片跑马灯,jquery跑马灯 图片不间断滚动效果

以下是使用 jQuery 实现图片跑马灯效果的示例代码：

HTML 代码：

<div class="marquee">
  <ul>
    <li><img src="image1.jpg" alt="Image 1"></li>
    <li><img src="image2.jpg" alt="Image 2"></li>
    <li><img src="image3.jpg" alt="Image 3"></li>
    <li><img src="image4.jpg" alt="Image 4"></li>
    <li><img src="image5.jpg" alt="Image 5"></li>
  </ul>
</div>

CSS 代码：

.marquee {
  width: 500px;
  height: 300px;
  overflow: hidden;
}

.marquee ul {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 10000px; /* 设置为一个很大的值，以容纳所有的图片 */
  animation: marquee 30s linear infinite;
}

.marquee li {
  float: left;
  width: 500px;
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-5000px); }
}

JavaScript 代码：

$(function() {
  // 获取 ul 元素
  var $ul = $('.marquee ul');
  // 获取 li 元素
  var $li = $ul.find('li');
  // 复制 li 元素
  for (var i = 0; i < 5; i++) {
    $ul.append($li.eq(i).clone());
  }
});

这段代码实现了一个在宽度为 500px、高度为 300px 的容器内滚动显示五张图片的跑马灯效果。其中，CSS 代码中使用了 animation 属性来实现动画效果，JavaScript 代码中复制了 li 元素，以保证图片在滚动到最后一张时立即切换到第一张。你可以根据自己的需求修改代码中的图片数量、容器大小等参数。