js实现DOM走马灯特效的方法

2023年6月10日下午12:08 • JavaScript

来分享一下实现JS DOM走马灯特效的方法攻略。

1. 前置技能

在实现JS DOM走马灯特效之前，你需要具备以下技能：

HTML基础知识
CSS基础知识
JavaScript基础知识
掌握DOM操作基础方法

2. 实现过程

步骤一：HTML骨架搭建

首先，我们需要在HTML中创建容器来承载图片，为了实现走马灯效果，我们需要在容器中创建两个相同的图片列表，并使用CSS使它们横向排列，并隐藏超出容器范围的部分。代码示例如下：

<div class="slider-container">
  <ul class="slider-list1">
    <li><img src="img/1.jpg" alt=""></li>
    <li><img src="img/2.jpg" alt=""></li>
    <li><img src="img/3.jpg" alt=""></li>
    <li><img src="img/4.jpg" alt=""></li>
    <li><img src="img/5.jpg" alt=""></li>
  </ul>
  <ul class="slider-list2">
    <li><img src="img/1.jpg" alt=""></li>
    <li><img src="img/2.jpg" alt=""></li>
    <li><img src="img/3.jpg" alt=""></li>
    <li><img src="img/4.jpg" alt=""></li>
    <li><img src="img/5.jpg" alt=""></li>
  </ul>
</div>

.slider-container {
  width: 600px;
  height: 400px;
  overflow: hidden; /* 超出容器范围的不显示 */
}

.slider-list1,
.slider-list2 {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex; /* 列表横向排列 */
  width: 1000%; /* 让两个列表总宽度是容器的10倍 */
}

.slider-list1 > li,
.slider-list2 > li {
  flex: 1;
  margin: 0;
  padding: 0;
  transition: all 1s ease; /* 使用过渡效果控制图片左右滑动 */
}

.slider-list2 {
  transform: translateX(-600px); /* 将第二个列表向左移动一个容器宽度的距离 */
}

步骤二：实现走马灯自动播放

接着，我们需要实现走马灯自动播放的效果，具体实现方式是通过定时器每隔一段时间自动切换到下一张图片，并使用CSS3的过渡效果使图片平滑移动。代码示例如下：

var sliderList1 = document.querySelector('.slider-list1')
var sliderList2 = document.querySelector('.slider-list2')

setInterval(function() {
  sliderList1.style.transform = 'translateX(-600px)'
  sliderList2.style.transform = 'translateX(-1200px)'
  setTimeout(function() {
    sliderList1.appendChild(sliderList1.querySelector('li'))
    sliderList1.style.transform = 'none'
    sliderList2.appendChild(sliderList2.querySelector('li'))
    sliderList2.style.transform = 'translateX(-600px)'
  }, 1000)
}, 3000)

步骤三：实现手动控制图片切换

最后，我们需要实现手动控制图片的切换效果，具体实现方式是监听容器的鼠标事件，在鼠标移入时停止自动播放，在鼠标移出时恢复自动播放，同时实现鼠标左右滑动图片的切换效果。代码示例如下：

var sliderContainer = document.querySelector('.slider-container')
var timer = null

sliderContainer.addEventListener('mouseenter', function() {
  clearInterval(timer)
})

sliderContainer.addEventListener('mouseleave', function() {
  timer = setInterval(function() {
    sliderList1.style.transform = 'translateX(-600px)'
    sliderList2.style.transform = 'translateX(-1200px)'
    setTimeout(function() {
      sliderList1.appendChild(sliderList1.querySelector('li'))
      sliderList1.style.transform = 'none'
      sliderList2.appendChild(sliderList2.querySelector('li'))
      sliderList2.style.transform = 'translateX(-600px)'
    }, 1000)
  }, 3000)
})

var startX = 0
var moveX = 0
var moveFlag = false

sliderContainer.addEventListener('mousedown', function(e) {
  startX = e.clientX
  moveFlag = true
})

sliderContainer.addEventListener('mousemove', function(e) {
  if (moveFlag) {
    moveX = e.clientX - startX
    sliderList1.style.transform = 'translateX(' + (-600 + moveX) + 'px)'
    sliderList2.style.transform = 'translateX(' + (-1200 + moveX) + 'px)'    
  }
})

sliderContainer.addEventListener('mouseup', function(e) {
  moveFlag = false
  if (moveX < 0) {
    sliderList1.appendChild(sliderList1.querySelector('li'))
    sliderList1.style.transform = 'none'
    sliderList2.appendChild(sliderList2.querySelector('li'))
    sliderList2.style.transform = 'translateX(-600px)'
  } else if (moveX > 0) {
    sliderList1.prepend(sliderList1.querySelector('li:last-child'))
    sliderList1.style.transform = 'none'
    sliderList2.prepend(sliderList2.querySelector('li:last-child'))
    sliderList2.style.transform = 'translateX(-600px)'
  }
})