[網頁設計] 圖片輪播jQuery套件

以下範例都在321/index3.html中

1.套件：swiper.jquery.min.js

2. css：swiper.css

3.布局

<div class="swiper-container">      <div class="swiper-wrapper">          <div class="swiper-slide">               <img src="images3/a-1.jpg">          <div>          <div class="swiper-slide">               <img src="images3/a-2.jpg">          </div>          <div class="swiper-slide">               <img src="images3/a-3.jpg">          </div>      </div>      <div class="swiper-button-prev"></div>      <div class="swiper-button-next"></div> </div>

4.指定swiper 容器尺寸:

.swiper-container, .swiper-slide {   width: 250px; }

5.初始化文件

window.onload = function() {         var mySwiper = new Swiper('.swiper-container', {             //添加需要的选项:             pagination: '.swiper-pagination',             nextButton: '.swiper-button-next',             prevButton: '.swiper-button-prev',             paginationClickable: true,             spaceBetween: 0,             centeredSlides: true,             autoplay: 2500,             autoplayDisableOnInteraction: false,             loop: true,         });     }