swiper的简单图片轮播功能

妖狐艹你老母 2023-07-06 13:17 1阅读 0赞

[swiper][]是一个相当强大的图片展示插件，下面我来介绍一下[swiper][]的简单[图片轮播][Link 1]功能。一般情况下我们所说的[图片轮播][Link 1]就是在一个区域内有几张图片循环展示，有的可以滑动图片观看下一张图，有的可以点击图下方的小点来选择哪个图，也有点击两侧的左右按钮来切换图片展示。我们先来看一下如何实现

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <div>
       1 
     </div> 
     <div>
       2 
     </div> 
     <div>
       3 
     </div> 
     <div>
       4 
     </div> 
     <div>
       5 
     </div> 
     <div>
       6 
     </div> 
     <div>
       7 
     </div> 
     <div>
       8 
     </div> 
     <div>
       9 
     </div> 
     <div>
       10 
     </div> 
     <div>
       11 
     </div> 
     <div>
       12 
     </div> 
     <div>
       13 
     </div> 
     <div>
       14 
     </div> 
     <div>
       15 
     </div> 
     <div>
       16 
     </div> 
     <div>
       17 
     </div> 
     <div>
       18 
     </div> 
     <div>
       19 
     </div> 
    </div></td> 
   <td> 
    <div> 
     <div> 
      <span>&lt;</span> 
      <span>div </span> 
      <span>class</span> 
      <span>=</span> 
      <span>"swiper-container"</span> 
      <span>&gt;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>&lt;</span> 
      <span>div </span> 
      <span>class</span> 
      <span>=</span> 
      <span>"swiper-wrapper"</span> 
      <span>&gt;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>&lt;</span> 
      <span>div </span> 
      <span>class</span> 
      <span>=</span> 
      <span>"swiper-slide"</span> 
      <span>&gt;</span> 
      <span>Slide</span> 
      <span> </span> 
      <span>1</span> 
      <span>&lt;</span> 
      <span>/</span> 
      <span>div</span> 
      <span>&gt;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>&lt;</span> 
      <span>div </span> 
      <span>class</span> 
      <span>=</span> 
      <span>"swiper-slide"</span> 
      <span>&gt;</span> 
      <span>Slide</span> 
      <span> </span> 
      <span>2</span> 
      <span>&lt;</span> 
      <span>/</span> 
      <span>div</span> 
      <span>&gt;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>&lt;</span> 
      <span>div </span> 
      <span>class</span> 
      <span>=</span> 
      <span>"swiper-slide"</span> 
      <span>&gt;</span> 
      <span>Slide</span> 
      <span> </span> 
      <span>3</span> 
      <span>&lt;</span> 
      <span>/</span> 
      <span>div</span> 
      <span>&gt;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>&lt;</span> 
      <span>div </span> 
      <span>class</span> 
      <span>=</span> 
      <span>"swiper-slide"</span> 
      <span>&gt;</span> 
      <span>Slide</span> 
      <span> </span> 
      <span>4</span> 
      <span>&lt;</span> 
      <span>/</span> 
      <span>div</span> 
      <span>&gt;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>&lt;</span> 
      <span>div </span> 
      <span>class</span> 
      <span>=</span> 
      <span>"swiper-slide"</span> 
      <span>&gt;</span> 
      <span>Slide</span> 
      <span> </span> 
      <span>5</span> 
      <span>&lt;</span> 
      <span>/</span> 
      <span>div</span> 
      <span>&gt;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>&lt;</span> 
      <span>div </span> 
      <span>class</span> 
      <span>=</span> 
      <span>"swiper-slide"</span> 
      <span>&gt;</span> 
      <span>Slide</span> 
      <span> </span> 
      <span>6</span> 
      <span>&lt;</span> 
      <span>/</span> 
      <span>div</span> 
      <span>&gt;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>&lt;</span> 
      <span>div </span> 
      <span>class</span> 
      <span>=</span> 
      <span>"swiper-slide"</span> 
      <span>&gt;</span> 
      <span>Slide</span> 
      <span> </span> 
      <span>7</span> 
      <span>&lt;</span> 
      <span>/</span> 
      <span>div</span> 
      <span>&gt;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>&lt;</span> 
      <span>div </span> 
      <span>class</span> 
      <span>=</span> 
      <span>"swiper-slide"</span> 
      <span>&gt;</span> 
      <span>Slide</span> 
      <span> </span> 
      <span>8</span> 
      <span>&lt;</span> 
      <span>/</span> 
      <span>div</span> 
      <span>&gt;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>&lt;</span> 
      <span>div </span> 
      <span>class</span> 
      <span>=</span> 
      <span>"swiper-slide"</span> 
      <span>&gt;</span> 
      <span>Slide</span> 
      <span> </span> 
      <span>9</span> 
      <span>&lt;</span> 
      <span>/</span> 
      <span>div</span> 
      <span>&gt;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>&lt;</span> 
      <span>div </span> 
      <span>class</span> 
      <span>=</span> 
      <span>"swiper-slide"</span> 
      <span>&gt;</span> 
      <span>Slide</span> 
      <span> </span> 
      <span>10</span> 
      <span>&lt;</span> 
      <span>/</span> 
      <span>div</span> 
      <span>&gt;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>&lt;</span> 
      <span>/</span> 
      <span>div</span> 
      <span>&gt;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>&lt;</span> 
      <span>!</span> 
      <span>--</span> 
      <span> </span>在图片下方增加小点 
      <span> </span> 
      <span>--</span> 
      <span>&gt;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>&lt;</span> 
      <span>div </span> 
      <span>class</span> 
      <span>=</span> 
      <span>"swiper-pagination"</span> 
      <span>&gt;</span> 
      <span>&lt;</span> 
      <span>/</span> 
      <span>div</span> 
      <span>&gt;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>&lt;</span> 
      <span>!</span> 
      <span>--</span> 
      <span> </span>增加左右按钮 
      <span> </span> 
      <span>--</span> 
      <span>&gt;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>&lt;</span> 
      <span>div </span> 
      <span>class</span> 
      <span>=</span> 
      <span>"swiper-button-prev"</span> 
      <span>&gt;</span> 
      <span>&lt;</span> 
      <span>/</span> 
      <span>div</span> 
      <span>&gt;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>&lt;</span> 
      <span>div </span> 
      <span>class</span> 
      <span>=</span> 
      <span>"swiper-button-next"</span> 
      <span>&gt;</span> 
      <span>&lt;</span> 
      <span>/</span> 
      <span>div</span> 
      <span>&gt;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>&lt;</span> 
      <span>/</span> 
      <span>div</span> 
      <span>&gt;</span> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

上方这几个div暂且先替代图片，和图片的展示效果相同，下面再来看一下js该如何写

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <div>
       1 
     </div> 
     <div>
       2 
     </div> 
     <div>
       3 
     </div> 
     <div>
       4 
     </div> 
     <div>
       5 
     </div> 
     <div>
       6 
     </div> 
     <div>
       7 
     </div> 
     <div>
       8 
     </div> 
     <div>
       9 
     </div> 
     <div>
       10 
     </div> 
     <div>
       11 
     </div> 
     <div>
       12 
     </div> 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <span>&lt;script </span> 
      <span>src</span> 
      <span>=</span> 
      <span>"http://code.jquery.com/jquery-2.1.3.min.js"</span> 
      <span>&gt;</span> 
      <span>&lt;/script&gt;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>&lt;</span> 
      <span>!</span> 
      <span>--</span> 
      <span> </span>引入 
      <span>js</span>的核心插件包 
      <span> </span> 
      <span>--</span> 
      <span>&gt;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>&lt;script </span> 
      <span>src</span> 
      <span>=</span> 
      <span>"../dist/js/swiper.jquery.min.js"</span> 
      <span>&gt;</span> 
      <span>&lt;/script&gt;</span> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>&lt;</span> 
      <span>!</span> 
      <span>--</span>初始化 
      <span>Swiper</span> 
      <span> </span> 
      <span>--</span> 
      <span>&gt;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>&lt;</span> 
      <span>script</span> 
      <span>&gt;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>var</span> 
      <span> </span> 
      <span>swiper</span> 
      <span> </span> 
      <span>=</span> 
      <span> </span> 
      <span>new</span> 
      <span> </span> 
      <span>Swiper</span> 
      <span>(</span> 
      <span>'.swiper-container'</span> 
      <span>,</span> 
      <span> </span> 
      <span>{ </span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>pagination</span> 
      <span>:</span> 
      <span> </span> 
      <span>'.swiper-pagination'</span> 
      <span>,</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>paginationClickable</span> 
      <span>:</span> 
      <span> </span> 
      <span>true</span> 
      <span>,</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>nextButton</span> 
      <span>:</span> 
      <span> </span> 
      <span>'.swiper-button-next'</span> 
      <span>,</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>prevButton</span> 
      <span>:</span> 
      <span> </span> 
      <span>'.swiper-button-prev'</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>}</span> 
      <span>)</span> 
      <span>;</span> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

这样他的基本功能就实现了，当然还需要一些样式来让他们的排列便于观看

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div> 
     <div>
       1 
     </div> 
     <div>
       2 
     </div> 
     <div>
       3 
     </div> 
     <div>
       4 
     </div> 
     <div>
       5 
     </div> 
     <div>
       6 
     </div> 
     <div>
       7 
     </div> 
     <div>
       8 
     </div> 
     <div>
       9 
     </div> 
     <div>
       10 
     </div> 
     <div>
       11 
     </div> 
     <div>
       12 
     </div> 
     <div>
       13 
     </div> 
     <div>
       14 
     </div> 
     <div>
       15 
     </div> 
     <div>
       16 
     </div> 
     <div>
       17 
     </div> 
     <div>
       18 
     </div> 
     <div>
       19 
     </div> 
     <div>
       20 
     </div> 
     <div>
       21 
     </div> 
     <div>
       22 
     </div> 
     <div>
       23 
     </div> 
     <div>
       24 
     </div> 
     <div>
       25 
     </div> 
     <div>
       26 
     </div> 
     <div>
       27 
     </div> 
     <div>
       28 
     </div> 
     <div>
       29 
     </div> 
     <div>
       30 
     </div> 
     <div>
       31 
     </div> 
     <div>
       32 
     </div> 
     <div>
       33 
     </div> 
     <div>
       34 
     </div> 
     <div>
       35 
     </div> 
     <div>
       36 
     </div> 
     <div>
       37 
     </div> 
     <div>
       38 
     </div> 
     <div>
       39 
     </div> 
     <div>
       40 
     </div> 
     <div>
       41 
     </div> 
    </div></td> 
   <td> 
    <div> 
     <div> 
      <span>&lt;</span> 
      <span>!</span> 
      <span>--</span>引入 
      <span>css</span>文件 
      <span>--</span> 
      <span>&gt;</span> 
     </div> 
     <div> 
      <span> </span> 
      <span>&lt;</span> 
      <span>link </span> 
      <span>rel</span> 
      <span>=</span> 
      <span>"stylesheet"</span> 
      <span> </span> 
      <span>href</span> 
      <span>=</span> 
      <span>"css/swiper.min.css"</span> 
      <span>&gt;</span> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>&lt;</span> 
      <span>!</span> 
      <span>--</span> 
      <span> </span>页内 
      <span>css</span>样式 
      <span> </span> 
      <span>--</span> 
      <span>&gt;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>&lt;style&gt;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>html, body </span> 
      <span>{ </span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>position</span> 
      <span>:</span> 
      <span> </span> 
      <span>relative</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>height</span> 
      <span>:</span> 
      <span> </span> 
      <span>100%</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>}</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>body </span> 
      <span>{ </span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>background</span> 
      <span>:</span> 
      <span> </span> 
      <span>#eee</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>font-family</span> 
      <span>:</span> 
      <span> </span> 
      <span>Helvetica</span> 
      <span> </span> 
      <span>Neue,</span> 
      <span> </span> 
      <span>Helvetica,</span> 
      <span> </span> 
      <span>Arial,</span> 
      <span> </span> 
      <span>sans-serif</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>font-size</span> 
      <span>:</span> 
      <span> </span> 
      <span>14px</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>color</span> 
      <span>:</span> 
      <span>#000</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>margin</span> 
      <span>:</span> 
      <span> </span> 
      <span>0</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>padding</span> 
      <span>:</span> 
      <span> </span> 
      <span>0</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>}</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>.swiper-container </span> 
      <span>{ </span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>width</span> 
      <span>:</span> 
      <span> </span> 
      <span>100%</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>height</span> 
      <span>:</span> 
      <span> </span> 
      <span>100%</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>}</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>.swiper-slide </span> 
      <span>{ </span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>text-align</span> 
      <span>:</span> 
      <span> </span> 
      <span>center</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>font-size</span> 
      <span>:</span> 
      <span> </span> 
      <span>18px</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>background</span> 
      <span>:</span> 
      <span> </span> 
      <span>#fff</span> 
      <span>;</span> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>/* Center slide text vertically */</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>display</span> 
      <span>:</span> 
      <span> </span> 
      <span>-webkit-box</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
      <span>display</span> 
      <span>:</span> 
      <span> </span> 
      <span>-ms-flexbox</span> 
      <span>;</span> 
     </div> 
     <div> 
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

[swiper]: http://www.oecom.cn/tag/swiper/
[Link 1]: http://www.oecom.cn/tag/%e5%9b%be%e7%89%87%e8%bd%ae%e6%92%ad/