<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>swiper简介_导入_以及使用.</title> <!-- swiper 是帮助完成PC端,移动端,滑动效果的库. 在使用过程当中, 可以选择依赖jquery的库, 也可以选择独立的js文件. 两者大小有所差别, 独立文件大约10k. (3.0-) 4.0+版本取消了对jquery依赖库的选择. === 在导入过程中. 需要导入swiper的js文件和css式样文件. 放在自定式样之上. 先导入css文件, 再导入js文件 --> <link rel="stylesheet" type="text/css" href="web-rem/css/swiper.min.css"> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript" src="js/swiper.jquery.min.js"></script> <script type="text/javascript"> // 使用swiper库的时候,可以对元素直接增加类.swiper-container.wrapper.slide.pagination.(button)prev,next $(function(){ // var swiper = new Swiper('.swiper-container'); // 变量接收优化性能. new Swiper('.swiper-container'); // 新建Swiper对象,赋值于式样名.. (容器) // 赋值过后该式样下, 与既定规则相同的类名, 即可拥有式样. // 必须元素===> 容器(container)>封套,包装(wrapper)>滑动对象(slide) }) </script> <style> .swiper-container { /*容器的长宽会随slide发生变化, 可不设.*/ } .swiper-slide { font: 33px/333px "Microsoft Yahei"; background: #ddd; } </style> </head> <body> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">slide1</div> <div class="swiper-slide">slide2</div> <div class="swiper-slide">slide3</div> <div class="swiper-slide">slide4</div> <div class="swiper-slide">slide5</div> <div class="swiper-slide">slide6</div> </div> </div> </body> </html>