JavaScript实现移动端轮播效果

要实现移动端的轮播效果，我们可以采用以下步骤：

1. HTML结构

首先，我们需要写出轮播图的HTML结构，可以采用<ul>和<li>的嵌套方式实现。

<div class="carousel">
  <ul class="carousel-list">
    <li><img src="slide1.jpg"></li>
    <li><img src="slide2.jpg"></li>
    <li><img src="slide3.jpg"></li>
    <li><img src="slide4.jpg"></li>
  </ul>
</div>

2. CSS样式

接着，我们需要对轮播图进行样式设计，包括设置容器宽高、设置图片宽高、隐藏溢出内容等。

.carousel {
  width: 300px;
  height: 150px;
  overflow: hidden;
}

.carousel-list {
  width: 1200px; /* 每张图片宽度为300px，共4张 */
  height: 150px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.carousel-list li {
  float: left;
  width: 300px;
  height: 150px;
}

3. JavaScript代码

最后，我们需要编写JavaScript代码实现轮播效果。我们可以通过定时器实现图片的自动播放，通过事件监听实现手动播放。以下是一个简单的实现：

var carouselList = document.querySelector('.carousel-list');
var leftButton = document.querySelector('.left-button');
var rightButton = document.querySelector('.right-button');
var index = 0;
var intervalId;

/* 自动播放 */
function play() {
  intervalId = setInterval(function () {
    index++;
    if (index >= 4) {
      index = 0;
    }
    carouselList.style.transform = 'translateX(' + (-index * 300) + 'px)';
  }, 2000);
}

/* 停止播放 */
function stop() {
  clearInterval(intervalId);
}

/* 左右按钮控制 */
leftButton.addEventListener('click', function () {
  index--;
  if (index < 0) {
    index = 3;
  }
  carouselList.style.transform = 'translateX(' + (-index * 300) + 'px)';
});

rightButton.addEventListener('click', function () {
  index++;
  if (index >= 4) {
    index = 0;
  }
  carouselList.style.transform = 'translateX(' + (-index * 300) + 'px)';
});

/* 鼠标移入停止播放，移出继续播放 */
carouselList.addEventListener('mouseenter', stop);
carouselList.addEventListener('mouseleave', play);

/* 开始播放 */
play();

以上代码实现了轮播图的自动播放、手动控制和鼠标控制等功能。具体实现过程可以参考以下示例：

示例一：完整HTML+CSS+JS

• JS实现移动端轮播效果

示例二：使用Swiper.js插件

• Swiper.js官方文档