移动端和p c端经常会遇到写轮播图的情况，这里只是简单的说一下swiper插件的简单用法（移动端为例）。

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">

<title>Title</title>

<link rel="stylesheet" href="css/swiper-3.4.2.min.css">

<script>

document.querySelector("html").style.fontSize = document.documentElement.clientWidth/375*50+"px";

</script>

</head>

<body>

　　<div class="detail_pic">

<div class="swiper-container">

<div class="swiper-wrapper">

<div class="swiper-slide"><img src="img/1.jpg" alt=""></div>

<div class="swiper-slide"><img src="img/2.png" alt=""></div>

<div class="swiper-slide"><img src="img/3.png" alt=""></div>

<div class="swiper-slide"><img src="img/4.png" alt=""></div>

<div class="swiper-slide"><img src="img/5.png" alt=""></div>

<div class="swiper-slide"><img src="img/6.png" alt=""></div>

<div class="swiper-slide"><img src="img/7.png" alt=""></div>

</div>

</div>

</div>

<script src="js/zepto.js"></script>

<script src="js/swiper-3.4.2.jquery.min.js"></script>

<script>

//轮播图

$(document).ready(function () {

var mySwiper = new Swiper ('.swiper-container', {

direction: 'horizontal',  //轮播方向

autoplay:2000,  //自动轮播

loop: true,   //循环

autoplayDisableOnInteraction : false  //用户操作后不停止

});

});

</script>

</body>

</html>

这样一个简单的轮播就实现啦，记得将图片地址换掉哦，原生的轮播，有时间可以写起来。。

swiper插件的简单使用，实现图片轮播的更多相关文章

  1. ViewFlipper的简单使用实现图片轮播效果

    /** * ViewFlipper: * 安卓系统自带的一个多页面管理控件,它可以实现子页面的自动切换 * 为ViewFlipper加入View: * (1)在layout布局文件静态导入子View ...

  2. 最简单的JS图片轮播

    var arr=new Array(); arr[1]="";//放图片地址 arr[2]=""; arr[3]=""; var no=0; ...

  3. 简单的3D图片轮播dome

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. ios图片轮播效果

    代码地址如下:http://www.demodashi.com/demo/11959.html ImageCarousel 简单封装的图片轮播器 内存过大由于我加载的图片分辨率较高(4k) 文件目录 ...

  5. JavaScript图片轮播，举一反三

    图片轮播,在一些购物网站上运用的不胜枚举,下面简单介绍一下图片轮播的实现. 如图 <!doctype html> <html lang="en"> < ...

  6. 使用Ajax+jQuery来实现前端收到的数据在console上显示+简单的主页设计与bootstrap插件实现图片轮播

    1.实现前端输入的数据在console上显示 上一篇是解决了在前端的输入信息在cygwin上显示,这次要给前台们能看见的数据,因为数据库里插入的数据少,所以写的语句翻来覆去就那几个词,emmm···当 ...

  7. 非常优秀的swiper插件————幻灯片播放、图片轮播

    http://www.idangero.us/ http://www.swiper.com.cn/ Swiper中文网 2015-10-15 SuperSlide2: (这是个PC用的滚屏插件,看着不 ...

  8. 原生JS实现"旋转木马"效果的图片轮播插件

    一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...

  9. PgwSlideshow-基于Jquery的图片轮播插件

    0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键 ...

随机推荐

  1. 【SqlServer系列】AS的用法

    1   概述 本篇文章简要分析,在SQL SERVER中,AS的基本用法. 2   具体分析 2.1  定义变量类型 )='Alan_beijing' 2.2 取别名 2.2.1 为结果集列取别名 c ...

  2. Ajax顺序执行

    循环中的Ajax 在前后端分离的项目中,Ajax是连接前后端的枢纽. 需求:有一个需要循环发起n次的请求,但是n次循环传参不同,我并不知道n是多少,并且要求能够保证返回顺序.JSONP用同步锁无效 示 ...

  3. 自学Python5.2-类、模块、包

    类.模块.包  一.类 类的概念在许多语言中出现,很容易理解.它将数据和操作进行封装,以便将来的复用. 二.模块module 通常模块为一个文件,直接使用import来导入就好了.可以作为module ...

  4. vertical-align 和 img属性 和 鼠标样式

    一.vertical-align 一)定义:定义行内元素的基线相对于该所在基线的垂直对齐.(只针对行类块inline/inline-block/<img>,块级不适用!) 二)语法:  三 ...

  5. python中的subprocess.Popen（）使用

    python中的subprocess.Popen()使用 从python2.4版本开始,可以用subprocess这个模块来产生子进程,并连接到子进程的标准输入/输出/错误中去,还可以得到子进程的返回 ...

  6. HTML：Event [转]

    这篇文章对于了解Javascript的事件处理机制非常好,将它全文转载于此,以备不时之需. 什么是事件? 事件(Event)是JavaScript应用跳动的心脏 ,也是把所有东西粘在一起的胶水.当我们 ...

  7. PHP中public,private,protected,abstract等关键字用法详解

    PHP中常用的关键字 在PHP中包含了很多对函数和类进行限制的关键字,常用的通常有abstract,final,interface,public,protected,private,static等等, ...

  8. bzoj 2588 Count on a tree

    Description 给定一棵N个节点的树,每个点有一个权值,对于M个询问(u,v,k),你需要回答u xor lastans和v这两个节点间第K小的点权.其中lastans是上一个询问的答案,初始 ...

  9. SharedPreferences 存List集合，模拟数据库，随时存取

    PS:SharedPreferences只要稍微学过一点就会用,他本身通过创建一个Editor对象,来存储提交,而editor可以存的格式为 他里面可以存一个Set<String> Set ...

  10. 3.sass的数据类型与函数

    数据类型 在sass里有数字.字符串.列表.颜色等类型 在cmd里 输入 sass -i 就会进入到交互模式,输入的计算可以马上得到结果 type-of()可以用来得到数据类型,如: type-of( ...