简易的jQuery图片轮播效果【原创】

页面的head部分，需引入页面的样式文件，代码如下：

<link type="text/css" rel="stylesheet" href="css/style.css">

页面的body部分，需设置好轮播图片、对应数字序号和控制按钮，代码如下：

<div class="wrapper">
  <header class="header">
    <h1>简易的jQuery图片轮播效果</h1>
  </header>

  <div class="slider">  
    <ul class="js__slider__images slider__images">
      <li class="slider__images-item"><img class="slider__images-image" src="https://unsplash.it/800/450?image=830" /></li>
      <li class="slider__images-item"><img class="slider__images-image" src="https://unsplash.it/800/450?image=1028" /></li>
      <li class="slider__images-item"><img class="slider__images-image" src="https://unsplash.it/800/450?image=981" /></li>
      <li class="slider__images-item"><img class="slider__images-image" src="https://unsplash.it/800/450?image=1026" /></li>
      <li class="slider__images-item"><img class="slider__images-image" src="https://unsplash.it/800/450?image=741" /></li>
    </ul>
    <div class="slider__controls">
      <span class="slider__control js__slider__control--prev slider__control--prev">上一张</span>
      
      <ol class="js__slider__pagers slider__pagers"></ol>
      
      <span class="slider__control js__slider__control--next slider__control--next">下一张</span>
    </div>
  </div>
</div>

页面的底部，需引入jQuery库和本地的JS文件，代码如下：

<script type="text/javascript" src='js/jquery.min.js'></script>
<script type="text/javascript" src="js/index.js"></script>