swiper插件的简单使用,实现图片轮播
移动端和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插件的简单使用,实现图片轮播的更多相关文章
- ViewFlipper的简单使用实现图片轮播效果
/** * ViewFlipper: * 安卓系统自带的一个多页面管理控件,它可以实现子页面的自动切换 * 为ViewFlipper加入View: * (1)在layout布局文件静态导入子View ...
- 最简单的JS图片轮播
var arr=new Array(); arr[1]="";//放图片地址 arr[2]=""; arr[3]=""; var no=0; ...
- 简单的3D图片轮播dome
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- ios图片轮播效果
代码地址如下:http://www.demodashi.com/demo/11959.html ImageCarousel 简单封装的图片轮播器 内存过大由于我加载的图片分辨率较高(4k) 文件目录 ...
- JavaScript图片轮播,举一反三
图片轮播,在一些购物网站上运用的不胜枚举,下面简单介绍一下图片轮播的实现. 如图 <!doctype html> <html lang="en"> < ...
- 使用Ajax+jQuery来实现前端收到的数据在console上显示+简单的主页设计与bootstrap插件实现图片轮播
1.实现前端输入的数据在console上显示 上一篇是解决了在前端的输入信息在cygwin上显示,这次要给前台们能看见的数据,因为数据库里插入的数据少,所以写的语句翻来覆去就那几个词,emmm···当 ...
- 非常优秀的swiper插件————幻灯片播放、图片轮播
http://www.idangero.us/ http://www.swiper.com.cn/ Swiper中文网 2015-10-15 SuperSlide2: (这是个PC用的滚屏插件,看着不 ...
- 原生JS实现"旋转木马"效果的图片轮播插件
一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...
- PgwSlideshow-基于Jquery的图片轮播插件
0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键 ...
随机推荐
- plsql本机不安装数据库连接远程数据库
用PL/SQL连接oracle数据库,不管是本地的还是远程的,一般都需要安装oracle客户端 如何达到不安装oracle客户端,又能使用PL/SQL工具? 1. oracle官网提供了i ...
- idea的快捷键
idea的快捷键大全 Alt+回车 导入包,自动修正 Ctrl+N 查找类 Ctrl+Shift+N 查找文件 Ctrl+Alt+L 格式化代码 Ctrl+Alt+O 优化导入的类和包 Alt+ ...
- web前端开发 --好多视频大集合--文化的传播者-杜恩德
提醒: 如果需要的话,尽快保存,说不定哪天分享就消失了呢. 1.妙味WEB前端开发全套视频教程 链接: http://pan.baidu.com/s/1bf1Ow2 密码: 2yyu 2.极客学院前端 ...
- Eclipse上Maven环境配置使用 (全)
Eclipse上Maven环境配置使用 (全) 1. 安装配置Maven: 1.1 从Apache网站 http://maven.apache.org/ 下载并且解压缩安装Apache Maven. ...
- 【ANT】java项目生成文件示例
<?xml version="1.0" ?> <project default="dist"> <property name=&q ...
- iis 10 ftp 被动模式配置
第一步: 进入 Server Level 的FTP Firewall Support 第二步: 在 Data Channel Port Range 下配置 Passive mode 的端口号范围,注意 ...
- java.util.ConcurrentHashMap (JDK 1.8)
1.1 java.util.ConcurrentHashMap继承结构 ConcurrentHashMap和HashMap的实现有很大的相似性,建议先看HashMap源码,再来理解Concurrent ...
- Mybatis篇总结
本文是对慕课网上"搞定SSM开发"路径的系列课程的总结,详细的项目文档和课程总结放在github上了.点击查看 JDBC写法 //sql: String sql = "s ...
- mysql 先分组在排序
mysql语句的语法模板: select distinct <select_list> from <left_table><join_type> join < ...
- 转 - .net/c# 使用RabbitMQ
背景 最近需要用C#写一个Adapter来做数据传输,合作方使用的是RabbitMQ,所以我这边也要跟着写写... 在网上搜索了一些,发现园子里的这篇写的还是非常好的.虽然有点老了,我自己用的是最新的 ...