一 关于Swiper
swiper是一款轻量级以及免费的移动设备触控滑块的js框架，主要运用于移动端的操作，但也可以用于pc端页面效果制作，完全的开源免费，
二 学习Swiper
Swiper官网提供了学习方法以及API文档，为我们学习提供了很大的帮助，在学习之前可以先看一下官网的在线演示效果，包括基础演示和精彩移动端以及PC端的页面展示，了解Swiper的精彩之处，下面通过一个京东主页面的轮播来介绍Swiper（京东轮播图属于固定大小的轮播图，比较简单）
1.准备工作
首先我们需要下载swiper，官方网站提供，可以下载完整的zip文件包，也可以只下载这三个文件（jquery-1.11.3.min.js swiper.min.js swiper.min.css ）,新建文件夹js和css，将js文件放在js中，将css文件放在css中，同时去京东官网获取轮播图片，放在image文件夹下
2 新建html文件
将下载的文件引入到页面中，官网中介绍了，首先加载插件，需要用到的文件有swiper.min.js和swiper.min.css文件。可下载Swiper文件或使用CDN
<title>京东轮播</title> <link rel="stylesheet" href="css/swiper.min.css" > <script src="js/jquery-1.11.3.min.js"></script> <script src="js/swiper.min.js"></script>
3 HTML内容。
<div class="swiper-container myswiper"> //一个大容器装载内容，高度是有内部的内容撑起 <div class="swiper-wrapper"> <div class="swiper-slide"> <a href="#"> //因为京东的图片是链接，图片包裹在a中 <img src="image/1.jpg" alt=""> //可以直接获取图片的网页地址 </a> </div> <div class="swiper-slide"> <a href="#"> <img src="image/2.jpg" alt=""> </a> </div> <div class="swiper-slide"> <a href="#"> <img src="image/3.jpg" alt=""> </a> </div> <div class="swiper-slide"> <a href="#"> <img src="image/4.jpg" alt=""> </a> </div> <div class="swiper-slide"> <a href="#"> <img src="image/5.jpg" alt=""> </a> </div> </div> <!-- 如果需要分页器 --> <div class="swiper-pagination"></div> //就是下面的小圆点 <!-- 如果需要导航按钮 --> <div class="swiper-button-prev swiper-button-white butt"></div> //向左的箭头 <div class="swiper-button-next"></div> //向右的箭头 <!--如果需要滚动条 --> <!--<div class="swiper-scrollbar"></div>//此处不需要，京东轮播图不需要 </div>-->
3 .给Swiper定义一个大小
因为京东图片大小为540*470，你可以直接在swiper-container中定义大小，也可以重新定义一个class来定义大小（此处我用myswiper）
*{ margin:0; padding:0; } .myswiper{ width:590px; height: 470px; }
4.初始化Swiper：最好是挨着</body>标签（如果没有紧挨着可以在函数前加函数）
<script> var mySwiper = new Swiper ('.swiper-container', { // direction: 'vertical', //京东默认为水平滑动，因此不需要，如果是垂直方向滑动，加上此属性 loop: true,//此处代表环路，就是滑动到最后一张之后，又重新回到第一章图片，形成一个环路 autoplay:1000, //表示自动轮播 // 如果需要分页器 pagination: { el: '.swiper-pagination',//图片切换至某页，小圆点颜色改变 clickable: true, clickableClass : 'my-pagination-clickable',//后两句表面鼠标点击小圆点时，也能切换， }, // 如果需要前进后退按钮 navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', },//前进和后退的按钮，有很多样式的按钮，可以改变大小和颜色 // 如果需要滚动条 // scrollbar: { // el: '.swiper-scrollbar', // }, }) </script>
完整代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>京东轮播</title> <link rel="stylesheet" href="css/swiper.min.css" > <script src="js/jquery-1.11.3.min.js"></script> <script src="js/swiper.min.js"></script> <style>//需要更改那个属性，就重新写css样式进行覆盖 *{ margin:0; padding:0; } .myswiper{ width:590px; height: 470px; border:1px solid red; } .swiper-button-next, .swiper-button-prev{ width:20px; height: 21px;
} .mySwiperBut{ background-image: none; width:24px; height: 40px; background: rgba(0,0,0,.3); text-align: center; line-height: 40px; color: hsla(0,0%,100%,.4); font-size: 18px; }//向前向后按钮的共同样式 .mySwiperBut:hover{ background: rgba(0,0,0,.6); } .swiper-pagination-bullet{ width: 7px; height: 7px; border:2px solid #fff; transition: all .2s ease; background: transparent; z-index: 1000000; }//分页小圆点的样式 .swiper-button-prev { left: 0px; } .swiper-button-next { right: 0px; } .swiper-pagination{ text-align: left; margin-left: 46px; bottom:20px; } .swiper-pagination-bullet-active{ background: #fff; opacity: 1; /*border:2px solid #b9beba;*/ /*transition: background .2s ease;*/
} </style></head><body> <div class="swiper-container myswiper"> <div class="swiper-wrapper"> <div class="swiper-slide"> <a href="#"> <img src="image/1.jpg" alt=""> </a> </div> <div class="swiper-slide"> <a href="#"> <img src="image/2.jpg" alt=""> </a> </div> <div class="swiper-slide"> <a href="#"> <img src="image/3.jpg" alt=""> </a> </div> <div class="swiper-slide"> <a href="#"> <img src="image/4.jpg" alt=""> </a> </div> <div class="swiper-slide"> <a href="#"> <img src="image/5.jpg" alt=""> </a> </div>
</div> <!-- 如果需要分页器 --> <div class="swiper-pagination"></div> <!-- 如果需要导航按钮 --> <div class="swiper-button-prev mySwiperBut"><</div> <div class="swiper-button-next mySwiperBut">></div> <!--如果需要滚动条 --> <!--<div class="swiper-scrollbar"></div></div>--><script> var mySwiper = new Swiper ('.swiper-container', { // direction: 'vertical', loop: true, autoplay:true, // 如果需要分页器 pagination: { el: '.swiper-pagination', clickable: true, clickableClass : 'my-pagination-clickable', }, // 如果需要前进后退按钮 navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, // 如果需要滚动条 // scrollbar: { // el: '.swiper-scrollbar', // }, }) </script></body></html>
原文出处：https://www.cnblogs.com/qianqian-it/p/9583300.html
随时随地看视频
