移动端和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. Vue深度学习（1）

    Hello World 现在就让我们来写第一个vue.js的实例.如下代码: html代码: <div id="demo"> {{ message }} </di ...

  2. ABP入门系列（6）——定义导航菜单

    ABP入门系列目录--学习Abp框架之实操演练 完成了增删改查以及页面展示,这一节我们来为任务清单添加[导航菜单]. 在以往的项目中,大家可能会手动在layout页面中添加一个a标签来新增导航菜单,这 ...

  3. 数据从文件导入Elasticsearch

    1.资源准备 1.数据文件:accounts.json 2.索引名称:bank 3.数据类型:account 4.批量操作API:bulk 2.导入数据 curl -XPOST 'localhost: ...

  4. Natas Wargame Level25 Writeup(头部注入+POST/GET注入)

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAArsAAAC8CAYAAAB4+WYTAAAABHNCSVQICAgIfAhkiAAAIABJREFUeF

  5. dubbo，eclipse，服务报错

    运行e3-manager报错找不到类,更新了子模块,但e3-manager下没有更新:

  6. bootstrap表格固定表头,表格内容滚动条滚动显示

    直接贴代码--- <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...

  7. Effective Java 第三版——9. 使用try-with-resources语句替代try-finally语句

    Tips <Effective Java, Third Edition>一书英文版已经出版,这本书的第二版想必很多人都读过,号称Java四大名著之一,不过第二版2009年出版,到现在已经将 ...

  8. 如何使用 stack？- 每天5分钟玩转 Docker 容器技术（112）

    定义好了 stack YAML 文件,就可以通过 docker stack deploy 命令部署应用. Docker 会按照 YAML 的内容来创建各种资源.为了不重名,所有资源都会加上 stack ...

  9. ABP .Net Core Entity Framework迁移使用MySql数据库

    一.迁移说明 ABP模板项目Entity Framework Core默认使用的是Sql Server,也很容易将数据库迁移到MySQL,步骤如下. 二.迁移MySQL步骤 1. 下载项目 请到 ht ...

  10. 开源框架SmartImageView的使用

    1.SmartImageView为一个网络图片框架,可以将一个网络URL的图片展示在UI上 2.SmartImageView使用 @1Github上下载源代码 @2拷贝原码到工程src下 @3布局配置 ...