基于Swiper实现移动端页面图片轮播效果

使用Swiper开发移动端页面，轻松实现图片的轮播。

swiper

1.主要包含模块：

swiper：指滑动、切换（整个滑动对象，有时特指滑块释放后仍然正向移动直到贴合边缘的过程（过渡））
container：指容器（swiper的容器里面包括滑动快（slide）的集合（wrapper）、分页器（pagination）、前进按钮等）
wrapper：指包含（触控的对象，可触摸区域，移动的块的集合，过渡时会随slide切换产生位移）
slider：指滑块（切换的块中的一个，可以包含文字、图片、html元素或另外一个swiper
pagination：指分页器（指示slide的数量和当前活动的slide）
active：指活动的，激活的（可视的（visible）slide是活动的，当可视slide不止一个时，默认最左边那个活动的）
callback：指回调函数（在某些情况下触发）

2.简单的轮播，如下所示：

 
 
 
  
  
  
  
  
 
 
 
  
  
  
  
  
 、 
  
  
 
 
 
 
 

3.js中其他参数：

var mySwiper = new Swiper(".swiper-container",{ 
 effect:"coverflow", 
 slidesPerView:3, 
 centeredSlides:true, 
 coverflow:{ 
  rotate:30, 
  stretch:10, 
  depth:60, 
  modifier:2, 
  slideshadows:true 
 } 
 }) 

注意：在使用swiper前，要引入swiper.css和swiper.js以及jQuery
具体可参考网址：点击打开链接

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。