当前位置：首页 > JavaScript

js ul 左右滑动js实现

2026-02-02 12:21:18JavaScript

实现UL元素左右滑动的方法

使用CSS和JavaScript结合实现UL元素的左右滑动效果，可以通过以下方法完成。

方法一：使用CSS的overflow和scroll-behavior属性

<style>
  .scroll-container {
    width: 300px;
    overflow-x: auto;
    scroll-behavior: smooth;
    white-space: nowrap;
  }
  .scroll-container ul {
    display: inline-block;
    padding: 0;
    margin: 0;
  }
  .scroll-container li {
    display: inline-block;
    width: 100px;
    height: 100px;
    background: #ccc;
    margin-right: 10px;
  }
</style>

<div class="scroll-container">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
  </ul>
</div>

这种方法利用了CSS的天然滚动特性，无需JavaScript即可实现基本滑动效果。

方法二：使用JavaScript控制滚动

<style>
  .slider {
    width: 300px;
    overflow: hidden;
    position: relative;
  }
  .slider ul {
    display: flex;
    padding: 0;
    margin: 0;
    list-style: none;
    transition: transform 0.3s ease;
  }
  .slider li {
    flex: 0 0 100px;
    height: 100px;
    background: #ccc;
    margin-right: 10px;
  }
  .slider-controls {
    margin-top: 10px;
  }
</style>

<div class="slider">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
  </ul>
</div>
<div class="slider-controls">
  <button class="prev">Previous</button>
  <button class="next">Next</button>
</div>

<script>
  const slider = document.querySelector('.slider ul');
  const prevBtn = document.querySelector('.prev');
  const nextBtn = document.querySelector('.next');
  let currentPosition = 0;
  const itemWidth = 110; // 100px width + 10px margin

  prevBtn.addEventListener('click', () => {
    currentPosition += itemWidth;
    if(currentPosition > 0) currentPosition = 0;
    slider.style.transform = `translateX(${currentPosition}px)`;
  });

  nextBtn.addEventListener('click', () => {
    const maxScroll = -(slider.scrollWidth - slider.parentElement.offsetWidth);
    currentPosition -= itemWidth;
    if(currentPosition < maxScroll) currentPosition = maxScroll;
    slider.style.transform = `translateX(${currentPosition}px)`;
  });
</script>

这种方法通过JavaScript动态计算滚动位置，使用CSS transform实现平滑滑动效果。

方法三：使用Intersection Observer API实现自动滑动

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if(entry.isIntersecting) {
      // 当元素进入视口时执行滑动动画
      entry.target.style.transform = 'translateX(0)';
    }
  });
}, {threshold: 0.1});

document.querySelectorAll('.slider li').forEach(item => {
  observer.observe(item);
});

这种方法适合在滚动容器中自动检测元素位置并触发滑动效果。

方法四：触摸设备支持

const slider = document.querySelector('.slider ul');
let isDown = false;
let startX;
let scrollLeft;

slider.addEventListener('mousedown', (e) => {
  isDown = true;
  startX = e.pageX - slider.offsetLeft;
  scrollLeft = slider.scrollLeft;
});

slider.addEventListener('mouseleave', () => {
  isDown = false;
});

slider.addEventListener('mouseup', () => {
  isDown = false;
});

slider.addEventListener('mousemove', (e) => {
  if(!isDown) return;
  e.preventDefault();
  const x = e.pageX - slider.offsetLeft;
  const walk = (x - startX) * 2;
  slider.scrollLeft = scrollLeft - walk;
});

// 触摸事件支持
slider.addEventListener('touchstart', (e) => {
  isDown = true;
  startX = e.touches[0].pageX - slider.offsetLeft;
  scrollLeft = slider.scrollLeft;
});

slider.addEventListener('touchend', () => {
  isDown = false;
});

slider.addEventListener('touchmove', (e) => {
  if(!isDown) return;
  const x = e.touches[0].pageX - slider.offsetLeft;
  const walk = (x - startX) * 2;
  slider.scrollLeft = scrollLeft - walk;
});

这种方法添加了对触摸设备的支持，使滑动效果在移动设备上也能正常工作。