jQuery自适应轮播图插件Swiper用法示例

本文实例讲述了jQuery自适应轮播图插件Swiper用法。分享给大家供大家参考，具体如下：

运行效果截图如下：

示例代码如下：

！DOCTYPE html html lang=' zh-cn ' hearta charset=' UTF-8 ' meta name=' viewport ' content=' width=设备宽度，初始比例=1，最大比例=1，用户比例=no ' title新建H5自适应模板/titlelink rel='样式表href=' swiper-3。3 .1 .量滴' CSS '样式html，正文{ position: relative高度： 100%;} body { background: # eee字体系列： Helvetica新，Helvetica，阿里亚尔，无衬线；font-size : 14pxcolor : # 000 margin : 0；padd : 0；}.swiper-容器{宽度： 100%；高度： 100%;}.swiper-slide { text-align : center；font-size : 18px背景# fffdisplay :-web套件-包装盒；显示器：-ms-flex盒；display :-web套件-flex；display: flex-web套件-包装盒-包装3360中心；-ms-flex-pack 3360中心；-网络套件-狡辩-content:中心；正义-内容：中心；-webkit-box-align:中心；-ms-flex-align:中心；-web套件-align-items :中心；align-items:居中；}/style/headdy div class=' Swiper-container ' div class=' Swiper-wrapper ' div class=' Swiper-slide ' img src=' http : images/banner 01。jpg '/div class=' Swiper-slide ' img src=' http : images/banner 03。jpg '/div/div class=' Swiper-slide ' img src=' http : images/banner 03。jpg 'swiper-container '，{ pagination: ' .swiper-pagination '，分页可点击： true })；/脚本/正文/html关于swiper的内容读者可参考相关网站：http://www .斯威珀。com。cn/下载/索引。超文本标记语言

更多关于jQuery相关内容感兴趣的读者可查看本站专题： 《jQuery扩展技巧总结》 、 《jQuery常用插件及用法总结》 、 《jQuery拖拽特效与技巧总结》 、 《jQuery表格(table)操作技巧汇总》 、 《jquery中Ajax用法总结》 、 《jQuery常见经典特效汇总》 、 《jQuery动画与特效用法总结》 及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。