JavaScript跑馬燈的實現

一、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%; }
}

以上代碼會在跑馬燈中添加圓角矩形的邊框，並在鼠標懸浮在跑馬燈中的元素時添加背景色。