html实现手机端轮播图,swiper移动端轮播图简单实现

HTML实现手机端轮播图可以使用CSS3的动画特性来实现，也可以使用JavaScript库来实现。而在移动端，推荐使用Swiper来实现轮播图。下面分别介绍两种实现方式。

## HTML实现手机端轮播图

### 使用CSS3动画实现

HTML结构：

<div class="slider">
  <img src="image1.jpg">
  <img src="image2.jpg">
  <img src="image3.jpg">
</div>

CSS样式：

.slider {
  width: 100%;
  height: 300px;
  overflow: hidden;
  position: relative;
}

.slider img {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  animation: slide 5s infinite;
}

@keyframes slide {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.slider img:nth-child(2) {
  animation-delay: 1s;
}

.slider img:nth-child(3) {
  animation-delay: 3s;
}

上面的代码会让轮播图中的图片循环轮播，每张图片停留5秒钟，并且使用了CSS3的动画特性来实现。

### 使用JavaScript库实现

可以使用一些JavaScript库来实现手机端的轮播图，比如Swiper、Slick等。这里以Swiper为例进行介绍。

HTML结构：

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="image1.jpg"></div>
    <div class="swiper-slide"><img src="image2.jpg"></div>
    <div class="swiper-slide"><img src="image3.jpg"></div>
  </div>
</div>

CSS样式：

.swiper-container {
  width: 100%;
  height: 300px;
}

.swiper-slide img {
  width: 100%;
  height: 100%;
}

JavaScript代码：

var mySwiper = new Swiper('.swiper-container', {
  autoplay: {
    delay: 5000,
  },
  loop: true,
  pagination: {
    el: '.swiper-pagination',
  },
});

上面的代码会让轮播图中的图片循环轮播，每张图片停留5秒钟，并且使用了Swiper库来实现。

## Swiper移动端轮播图简单实现

Swiper是一款移动端的JavaScript库，可以很方便地实现轮播图。下面是一个简单的Swiper轮播图的实现代码。

HTML结构：

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="image1.jpg"></div>
    <div class="swiper-slide"><img src="image2.jpg"></div>
    <div class="swiper-slide"><img src="image3.jpg"></div>
  </div>
  <div class="swiper-pagination"></div>
</div>

CSS样式：

.swiper-container {
  width: 100%;
  height: 300px;
}

.swiper-slide img {
  width: 100%;
  height: 100%;
}

JavaScript代码：

var mySwiper = new Swiper('.swiper-container', {
  autoplay: {
    delay: 5000,
  },
  loop: true,
  pagination: {
    el: '.swiper-pagination',
  },
});

上面的代码会让轮播图中的图片循环轮播，每张图片停留5秒钟，并且使用了Swiper库来实现。