Swiper 滑动切换图片(可用于PC端,移动端)
作为一名后端的普通程序猿, 你让我搞这种前端不是跟我玩命吗,所以用插件来搞,省事又简单,而且Swiper使用又简单是吧;
头皮发麻,不喜欢说废话,我更喜欢直接看到效果;
按Swiper官方文档来说, 它需要配合JQuery来使用,所以也需要引入JQ;
1, 先去官网下载一波它的 CSS, JS 文件先,https://2.swiper.com.cn/download/index.html#file1
下载完直接引入即可上手用了, 路径自己改。
<link rel="stylesheet" href="css/swiper.min.css"> <script src="js/swiper.min.js"></script>
2, 废话不多说, 直接上测试例子;
HTML(swiper的写法):
container: 装所有滑动slide的容器
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide blue-slide">内容1</div>
<div class="swiper-slide red-slide">内容2</div>
<div class="swiper-slide orange-slide">内容3</div>
<div class="swiper-slide blue-slide">内容4</div>
<div class="swiper-slide orange-slide">内容5</div>
</div>
CSS(这个按自己喜欢来调, 例子当然是越简单越好):
<!-- Demo styles -->
<style>
* {
margin: 0;
padding: 0;
}
.blue-slide {
background: #4390EE;
}
.red-slide {
background: #CA4040;
}
.orange-slide {
background: #FF8604;
}
.swiper-slide {
line-height: 300px;
color: #fff;
font-size: 36px;
text-align: center;
}
</style>
JS:
如果只是简单做轮播图,autoplay 和 loop 这两个参数即可;
里面的注释我已经写好了, 更多的参数或者功能可以去官网找下即可;
<!-- Initialize Swiper -->
<script>
var mySwiper = new Swiper('.swiper-container',{
loop : true, // 形成环路,不断循环, 跟autoplay可组成轮播图
autoplay: {
delay: 1000,//1秒切换一次
},
initialSlide: 2, // 一开始就放到所有中间的位置
slidesPerView: 3, // slider容器能够同时显示的slides数量
centeredSlides: true, // 默认状态下slide居左,但是居左有问题,取到的slide下标有误,一般设为true:居中
slideToClickedSlide: true, // 点击slide会过渡到这个slide
effect : 'coverflow', // 切换效果, coverflow:3D流 (可选)
coverflowEffect: { // 切换效果的参数
rotate: 0,
stretch: 5,
depth: 60,
modifier: 2,
slideShadows : true
},
on:{
click:function(){
alert(this.clickedIndex); //当前点击的是第几张
},
transitionEnd: function(event){
img_index = this.activeIndex; //滑动到第几张
},
}
});
</script>
效果如下:
Swiper 滑动切换图片(可用于PC端,移动端)的更多相关文章
- H5+CSS3实现手指滑动切换图片
包含3个文件:html.slider-H5.js.jquery.js(自行下载).在html中可配置滑动参数.具体代码如下: HTML代码: <!DOCTYPE HTML> <htm ...
- Android:使用ViewPager实现左右滑动切换图片(图上有点点)
在以下实例的基础上加上点点 Android:使用ViewPager实现左右滑动切换图片 (简单版) 效果预览: 因为要把点点放图片上,所以修改布局为相对布局: <?xml version=&qu ...
- Android:使用ViewPager实现左右滑动切换图片 (简单版)
ViewPager,它是google SDk中自带的一个附加包的一个类, 可以使视图滑动. 步骤: 1.引入android-support-v4.jar包,在主布局里加入 <android.su ...
- 基于jQuery左右滑动切换图片代码
分享一款基于jQuery左右滑动切换图片代码.这是一款基于jQuery实现的左右滑动切换焦点图代码.效果图如下: 在线预览 源码下载 实现的代码: <div class="v_ou ...
- WPF之鼠标滑动切换图片
在网上找了一会儿也没找到我想要的效果,还是自己动手,丰衣足食吧. 需求:当前面板中只显示一张图片,图片栏的下部有用来显示当前图片处于图片队列中的位置的圆球,并且点击下部栏内的圆球可以快速切换,附动画缓 ...
- android 图片浏览器滑动切换图片
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools= ...
- 微信小程序左右滑动切换图片酷炫效果
开门见山,先上效果吧!感觉可以的用的上的再往下看. 心动吗?那就继续往下看! 先上页面结构吧,也就是wxml文件,其实可以理解成微信自己封装过的html,这个不多说了,不懂也没必要往下看了. < ...
- 微信小程序左右滑动切换图片酷炫效果(附效果)
开门见山,先上效果吧!感觉可以的用的上的再往下看. 心动吗?那就继续往下看! 先上页面结构吧,也就是wxml文件,其实可以理解成微信自己封装过的html,这个不多说了,不懂也没必要往下看了. < ...
- 把图片画到画布上,适应PC和移动端
画一张图片到画布上 <canvas id="myCanvas" width="1000px" height="200px" >您 ...
随机推荐
- 前端编程提高之旅(三)----浏览器兼容之IE6
在爱奇艺实习期间,乐帝主要负责移动端活动页面的制作,因为移动浏览器是随着智能手机兴起的,这就决定了移动端不会重蹈浏览器兼容问题的覆辙.一開始就比較好的支持web标准,而纵观整个互联网行业,移动web开 ...
- JS常用方法手记
1.判断arr数组是否含有元素str,没有返回-1 arr.indexOf(str) 2.遍历arr数组,k为键,v为值 arr.map((v, k) => { return;}) 3.arr数 ...
- python 基础 7.8 json--下
一. 文件和json 之间的转换 1. json.dump() #/usr/bin/python #coding=utf-8 #@Time :2017/11/13 0:12 #@Authe ...
- rabbitmq 安装-单点
centos6.5 rabbitmq搭建 环境:centos6.5 192.168.9.41 安装rabbitmq需要先安装erlang.rabbitmq3.6版本需要erlang R16B03 ...
- intellij idea 大内存优化配置 idea64.exe.vmoptions文件配置
-ea-server-Xms2G-Xmx4096M-Xss2m-XX:MaxMetaspaceSize=2G-XX:ReservedCodeCacheSize=1G-XX:MetaspaceSize= ...
- kindeditor浏览器兼容性问题
1.kindeditor在IE下出现异常“对象不支持“attachEvent”属性或方法” 通过开发人员工具会发现: 这时问题就很明了,也就是IE11版本不支持“attachEvent”; 解决方案: ...
- log4j方法的使用
log4j.properties配置 log4j.logger.webAplLogger=info, logFile log4j.appender.logFile=org.apache.log4j.F ...
- 消息队列activeMq 使用介绍
深入浅出 消息队列 ActiveMQhttp://blog.csdn.net/jwdstef/article/details/17380471 一. 概述与介绍 ActiveMQ 是Apache出 ...
- HTML5+ Android打包证书
HBuilder默认App云端打包默认使用的是DCloud公用证书,其信息如下: MD5: 59:20:1C:F6:58:92:02:CB:2C:DA:B2:67:52:47:21:12 SHA1:B ...
- python 创建一个实例:步骤二 添加行为方法,编写方法
添加方法 class Person(): def __init__(self,name,job=None,pay=0): self.name= name self.job = job self.pay ...