轮播走起，html+css+js搭建图片轮播器！

## 轮播走起，html+css+js搭建图片轮播器！

在网页设计中，图片轮播是一种常见的效果，它可以用来展示多个图片，并在用户点击或自动切换时进行轮播。本文将介绍如何使用html、css和js来实现一个最基础的图片轮播器，该轮播器具有自动轮播、左右点击切换轮播、点击小圆点切换对应的图片等功能。

### 实现原理

图片轮播器的实现原理很简单，它利用了html和css来创建图片轮播器的结构和样式，并使用js来控制轮播器的行为。html代码负责创建轮播器的整体结构，包括图片容器、左右箭头和控制小圆点；css代码负责设置轮播器的样式，包括图片的大小和位置、箭头的样式和位置、小圆点的样式和位置等；js代码负责控制轮播器的行为，包括自动轮播、左右点击切换轮播、点击小圆点切换对应的图片等。

### 具体步骤

1. **创建html结构** 

首先，我们需要创建一个html结构来存放图片轮播器。html结构如下：

```html
<div class="carousel">
  <ul class="carousel-inner">
    <li><img src="image1.jpg" alt="Image 1"></li>
    <li><img src="image2.jpg" alt="Image 2"></li>
    <li><img src="image3.jpg" alt="Image 3"></li>
  </ul>
  <a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carousel" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
  <ol class="carousel-indicators">
    <li data-target="#carousel" data-slide-to="0" class="active"></li>
    <li data-target="#carousel" data-slide-to="1"></li>
    <li data-target="#carousel" data-slide-to="2"></li>
  </ol>
</div>

2. 设置css样式

接下来，我们需要设置css样式来美化图片轮播器。css样式如下：

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

.carousel-inner {
  position: relative;
  width: 100%;
  height: 100%;
}

.carousel-inner li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.carousel-inner li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-control-prev,
.carousel-control-next {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50px;
  height: 100%;
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  text-align: center;
  line-height: 100px;
  font-size: 24px;
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
  background-color: rgba(0, 0, 0, 0.7);
}

.carousel-indicators {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0;
  margin: 0;
  list-style: none;
}

.carousel-indicators li {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 5px;
  background-color: #ccc;
  border-radius: 50%;
}

.carousel-indicators li.active {
  background-color: #fff;
}

3. 添加js代码

最后，我们需要添加js代码来控制图片轮播器的行为。js代码如下：

$(document).ready(function() {
  $('.carousel').carousel({
    interval: 5000,
    pause: 'hover'
  });
});

效果展示

完成上述步骤后，您就可以看到一个最基础的图片轮播器了。该轮播器具有自动轮播、左右点击切换轮播、点击小圆点切换对应的图片等功能。

结语

本文介绍了如何使用html、css和js来实现一个最基础的图片轮播器。该轮播器具有自动轮播、左右点击切换轮播、点击小圆点切换对应的图片等功能。希望本文能够对您有所帮助。