前端知识学习之轮播图轮播图实现，具体的前端代码，包括详细的HTML、CSS、JAVASCREPT代码等等，通过代码实现最

关于轮播图，该页面实现主要是由四张图片轮流播放实现，页面中还有的操作是手动选择页面显示的图片，选中图片会导致手动悬停；自动轮播图片，当鼠标悬浮会自动触发轮播暂停，移动后继续轮播；左右更改显示的图片，通过向左向右点击滑片实现图片切换三个简单的功能。
具体实现方法：
1、前端代码部分
(1) HTML关键代码：
a. 头文件
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="./style.css">
  <title>轮播图</title>
</head>

b. 主要页面实现文件
<body>
  <div>
    <h1>轮播图展示</h1>
    <main>
      <div id="my-slider" class="slider-list">
        <ul>
          <li class="slider-list__item--selected">
            <img src="https://？图片位置">
          </li>
          <li class="slider-list__item">
            <img src="https://？图片位置">
          </li>
          <li class="slider-list__item">
            <img src="https://？图片位置">
          </li>
          <li class="slider-list__item">
            <img src="https://？图片位置">
          </li>
        </ul>
      </div>
    </main>
  </div>
  <script src="./script.js"></script>
<body>
(2)CSS代码
#my-slider {
  position: relative;
  width: 790px;
}
.slider-list ul {
  list-style-type: none;
  position: relative;
  margin: 0;
  padding: 0;
}
.slider-list__item,
.slider-list__item--selscted {
  position: absolute;
  transition: opacity 1s;
  opacity: 0;
  text-align: center;
}
.slider-list__item--selscted {
  opacity: 1;
  transition: opacity 1s;
}
(3)JAVASCRIPIT代码
class Slider {
constructor(id) {
    this.container = document.getElementById(id);
    this.items = this.container
        .querySelectorAll('.slider-list__item, .slider-list__item--selected');
}
getSelectedItem() {
    const selected = this.container
        .querySelector('.slider-list__item--selected');
    return selected;
}
getSelectedItemIndex() {
    return Array.from(this.items).indexOf(this.getSelectedItem());
}
SlideTo(idx) {
    const selected = this.getSelectedItem();
    if (selected) {
        selected.className = 'slider-list__item';
    }
    const item = this.items[idx];
    if (item) {
        item.className = 'slider-list__item--selected';
    }
}
SliderNext() {
    const currentIdx = this.getSelectedItemIndex();
    const nextIdx = (currentIdx + 1) % this.items.length;
    this.slideTo(nextIdx);
}
sliderPrevious() {
    const currentIdx = this.getSelectedItemIndex();
    const previousIdx = (this.items.length + currentIdx-1) % this.items.length;
    this.slideTo(previousIdx);
}
}
const slider = new Slider('my-slider');
setInterval(() => {
    slider.SliderNext();
}, 2000);
2、遇到的问题
主要遇到的问题是，在页面预览时HTML文件没有找到对应的js文件位置，经过查询相关资料已找到解决方法，在HTML文件中使用<script src="文件名称"></script>插入相应的JS文件，使功能及样式映射到前端页面上。