JavaScript跑马灯的实现

小蓝 • 2024-12-09 11:00 • 编程

一、JS跑马灯插件

JS跑马灯插件是一种非常便捷的JS代码解决方案，它不需要我们自己实现代码，而是直接调用插件库中的代码来实现该功能。像jQuery、Bootstrap、Vue等流行库都提供了跑马灯插件，我们只需按照官方文档引入插件即可轻松实现跑马灯效果。

下面是使用jQuery轮播插件slick来实现跑马灯的代码示例：

// 引入jQuery
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
// 引入slick插件
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>

// 在HTML中添加以下DOM结构
<div class="slider">
  <div>Slide 1</div>
  <div>Slide 2</div>
  <div>Slide 3</div>
</div>

// 根据文档，在我们的JavaScript文件中调用slick插件
$(document).ready(function(){
  $('.slider').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 2000,
    arrows: false,
    dots: false
  });
});

二、JS跑马灯代码

如果我们想自己实现JS跑马灯的代码，可以遵循以下步骤:

1、在HTML中添加DOM结构

<div class="marquee">
  <ul>
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
    <li>List Item 4</li>
    <li>List Item 5</li>
  </ul>
</div>

2、使用JavaScript获取DOM元素，进行向左或向右的滚动

var marquee = document.querySelector('.marquee ul');
var clone = marquee.cloneNode(true);
marquee.parentNode.appendChild(clone);

var i = 0;
function animate() {
  i++;
  if (i == marquee.children.length) {
    i = 0;
    clone.style.left = "0";
  }
  marquee.style.left = -i * 100 + "px";
  clone.style.left = (marquee.children.length - i) * 100 + "px";
}
setInterval(animate, 20);

三、JS跑马灯输入框文字

有时我们需要在JS跑马灯中添加一些输入框元素。下面是添加输入框元素的示例代码:

<div class="marquee">
  <ul>
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li><input type="text" value="List Item 3" /></li>
    <li>List Item 4</li>
    <li>List Item 5</li>
  </ul>
</div>

添加输入框后，我们可以通过JS代码对输入框内的文字进行操作，例如：

var input = document.querySelector('.marquee input');
setInterval(function() {
  var text = input.value;
  input.value = text.slice(1) + text.slice(0, 1);
}, 200);

四、JS实现跑马灯选取

JS实现跑马灯选取，可以根据点击跑马灯中的元素，来将该元素作为选取的内容。以下是一个实现跑马灯选取的示例代码:

var options = document.querySelectorAll('.marquee li');
for (var i = 0; i < options.length; i++) {
  options[i].addEventListener('click', function() {
    alert(this.innerHTML);
  });
}

以上代码会在点击跑马灯中的元素时弹出一个框，提示当前选中的元素的内容。

五、JS跑马灯自定义样式

JS跑马灯的样式可以进行修改来实现不同的效果。下面是一个可以自定义样式的示例代码：

.marquee {
  height: 70px;
  overflow: hidden;
  position: relative;
  background-color: #f0f0f0;
}
.marquee ul {
  position: absolute;
  width: 200%;
  left: 0;
  padding: 0;
  margin: 0;
  animation: marquee 10s linear infinite;
}
.marquee li {
  display: inline-block;
  width: 25%;
  text-align: center;
  border: 1px solid #ccc;
  background-color: #fff;
}

@keyframes marquee {
  0% { left: 0; }
  100% { left: -100%; }
}

以上代码会在跑马灯中添加圆角矩形的边框，并在鼠标悬浮在跑马灯中的元素时添加背景色。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/219682.html