swiper
Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。
Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。
Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择
1、首先我们在写项目之前引用swiper时，也就是所说的运行环境，要把JS和CSS引入文件引入
2、HTML片段
3.JS部分
jQuery版本的
Swiper 是移动端使用的触摸滑动的一个开源lib，可应用于移动网站，web App，native App或者混合类app。
它专为ios设计，但是也支持Android，Windows Phone8，以及桌面浏览器。Swiper 不兼容所有平台，它是为比较新的触摸设计，只在最新的浏览器上有最好的体验。
案列
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scale=no, maximum-scale=1.0, minimum-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <link rel="stylesheet" href="./swiper.css"> 10 <style> 11 p { 12 text-align: center; 13 } 14 15 img { 16 43.75rem; 17 height: 18.125rem; 18 } 19 20 .swiper-container { 21 43.75rem; 22 height: 18.125rem; 23 margin: 0 auto; 24 } 25 </style> 26 </head> 27 28 <body> 29 <div class="swiper-container" id="case1"> 30 <div class="swiper-wrapper"> 31 <div class="swiper-slide"><img src="./l1.jpg"></div> 32 <div class="swiper-slide"><img src="./l2.jpg"></div> 33 <div class="swiper-slide"><img src="./l3.jpg"></div> 34 </div> 35 <!-- 导航按钮 上一页下一页 --> 36 <div class="swiper-button-prev"></div> 37 <div class="swiper-button-next"></div> 38 <!-- 分页器 --> 39 <div class="swiper-pagination"></div> 40 <!-- 滚动条 --> 41 <div class="swiper-scrollbar"></div> 42 </div> 43 <script src="./swiper.min.js"></script> 44 <script> 45 // 首先用rem布局，这样就不奇怪了 46 // 图片自动播放 47 // 当鼠标点击左右箭头时，图片移动 48 // 鼠标点击分页器时，图片也会进行移动 49 // 无论是鼠标点击箭头还是分页器都会显示一个滚动条，它是随图片的移动显示在相应的位置，在显示时它是从无到有的过程，有一个缓慢动画的过程 50 var mySwiper = new Swiper('.swiper-container', { 51 autoplay: true, //可选选项，自动滑动 52 initialSlide: 1, //默认显示第二张图片索引从0开始 53 speed: 2000, //设置过度时间 54 /* grabCursor: true,//鼠标样式根据浏览器不同而定 */ 55 autoplay: { 56 delay: 3000 57 }, 58 /* 设置每隔3000毫秒切换 */ 59 // <!-- 分页器 --> 60 pagination: { 61 el: '.swiper-pagination', 62 clickable: true, 63 }, 64 // <!-- 导航按钮 上一页下一页 --> 65 navigation: { 66 nextEl: '.swiper-button-next', 67 prevEl: '.swiper-button-prev', 68 }, 69 // <!-- 滚动条 --> 70 scrollbar: { 71 el: '.swiper-scrollbar', 72 hide: true, 73 }, 74 /* 设置当鼠标移入图片时是否停止轮播*/ 75 autoplay: { 76 disableOnInteraction: false, 77 }, 78 }); 79 </script> 80 </body> 81 82 </html> 83
注意点：swiper可以支持JS和jQuery两种方式，最新版本是3.x，优先支持iOS和最新版本的安卓移动端