swiper实现左右滑动图片
ref:http://www.swiper.com.cn/usage/index.html
help:https://segmentfault.com/a/1190000002962202
src:
<!DOCTYPE htmaxCount PUBLIC "-//W3C//DTD XHTmaxCount 1.0 Transitional//EN" "http://www.w3.org/TR/xhtmaxCount1/DTD/xhtmaxCount1-transitional.dtd">
<html xmaxCountns="http://www.w3.org/1999/xhtmaxCount">
<head>
<meta http-equiv="Content-Type"
content="text/htmaxCount; charset=utf-8" />
<link rel="stylesheet"
href="/agcom/weixin/tools/sliderjs/swiper-3.4.1.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="/agcom/weixin/tools/sliderjs/swiper-3.4.1.jquery.min.js"></script> </head> <body>
<div class="swiper-container">
<div class="swiper-wrapper" id="imgDiv"> </div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div> <!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div> <!-- 如果需要滚动条 -->
<div class="swiper-scrollbar"></div>
</div>
<script>
var mySwiper = new Swiper ('.swiper-container', {
direction: 'horizontal',
loop: true, // 如果需要分页器
pagination: '.swiper-pagination', // 如果需要前进后退按钮
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev', // 如果需要滚动条
scrollbar: '.swiper-scrollbar',
observer:true,//修改swiper自己或子元素时,自动初始化swiper
observeParents:true,//修改swiper的父元素时,自动初始化swiper
});
function buildListItemBy(parent,imgUrls){
var dataItem;
for(var i=0,len=imgUrls.length;i<len;i++){
dataItem=imgUrls[i];
//first div
var imgDiv=document.createElement("div");
imgDiv.setAttribute("class","swiper-slide");
var img=document.createElement("img");
img.src=dataItem;
img.setAttribute("style","width:100%;height:100%;");
//img.setAttribute("src",""+dataItem.photopath);
imgDiv.appendChild(img); //add div
parent.appendChild(imgDiv);
}
}
window.onload=function(){ var parent=document.getElementById("imgDiv");//swiper-container swiper-container-horizontal var data="http://113.59.110.57:8888/agcom/upload/photo/problem145612/IMG_20170306084422_wangling0.jpg,http://113.59.110.57:8888/agcom/upload/photo/problem145612/IMG_20170306084422_wangling0.jpg,http://113.59.110.57:8888/agcom/upload/photo/problem145612/IMG_20170306084422_wangling0.jpg,http://113.59.110.57:8888/agcom/upload/photo/problem145612/IMG_20170306084422_wangling0.jpg,http://113.59.110.57:8888/agcom/upload/photo/problem145612/IMG_20170306084422_wangling0.jpg,http://113.59.110.57:8888/agcom/upload/photo/problem145612/IMG_20170306084422_wangling0.jpg,http://113.59.110.57:8888/agcom/upload/photo/problem145612/IMG_20170306084422_wangling0.jpg,http://113.59.110.57:8888/agcom/upload/photo/problem145612/IMG_20170306084422_wangling0.jpg";
buildListItemBy(parent,data.split(','));
}
</script>
</body>
</html>
swiper实现左右滑动图片的更多相关文章
- 手机触屏滑动图片切换插件swiper.js
今天给大家分享一款手机触屏滑动图片切换插件swiper.js是一款swiper手机触屏滑动图片幻灯片,适合各种尺寸.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div ...
- js鼠标滑动图片显示隐藏效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Android 使用ViewPager实现左右循环滑动图片
ViewPager这个小demo实现的是可以左右循环滑动图片,下面带索引,滑到最后一页在往右滑动就要第一页,第一页往左滑动就到最后一页,先上效果图,用美女图片是我一贯的作风,呵呵 1. 首先看一 ...
- ios7中使用scrollview来横向滑动图片,自动产生偏移竖向的偏移 问题
ios7中使用scrollview来横向滑动图片,自动产生偏移竖向的偏移 问题 如图红色为scrollview的背景色,在scrollview上加了图片之后,总会有向下的偏移 设置conten ...
- appium 学习各种小功能总结--功能有《滑动图片、保存截图、验证元素是否存在、》---新手总结(大牛勿喷,新手互相交流)
1.首页滑动图片点击 /** * This Method for swipe Left * 大距离滑动 width/6 除数越大向左滑动距离也越大. * width:720 *height:1280 ...
- 滑动验证 和滑动图片验证JS
滑动验证 先放效果图 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- react使用ant design pro时的滑动图片组件
react的滑动图片验证,是基于https://segmentfault.com/a/1190000018309458?utm_source=tag-newest做的修改,改动的主要有以下几点: 1. ...
- c# 简单的滑动图片验证
普通的验证码对用户使用体验不友好,出现了滑动图片验证的验证方式,用户只要按住滑块完成图片的拼接即可通过验证(这是最简单的方式,滑动轨迹,数据分析,滑行速度 什么的暂没考虑) 主要的实现思路: 1.先从 ...
- 解决问题:swiper动态加载图片后无法滑动
原因:swiper在初始化的时候会扫描swiper-wrapper下面的swiper-slide的个数,从而完成初始化,但是由于动态加载时在初始化之后的动作,所以导致无法滑动. 解决方案 1:在动态获 ...
随机推荐
- 练习题目 :if for while else range、xrange、zip
range在内存中直接生成指定的序列,当序列非常大时会浪费内存资源: xrange则不会直接生成一个list,而是每次调用返回其中的一个值,而非直接全部生成存于内存中 range([start,] s ...
- 斯坦福机器学习视频笔记 Week3 逻辑回归与正则化 Logistic Regression and Regularization
我们将讨论逻辑回归. 逻辑回归是一种将数据分类为离散结果的方法. 例如,我们可以使用逻辑回归将电子邮件分类为垃圾邮件或非垃圾邮件. 在本模块中,我们介绍分类的概念,逻辑回归的损失函数(cost fun ...
- Get Docker CE for Ubuntu
Docker 分为开源免费的 CE(Community Edition)版本和收费的 EE(Enterprise Edition)版本. 配置 Docker 的 apt 源 1. 安装包,允许 apt ...
- Luogu-2600 [ZJOI2008]瞭望塔
把地面看成半平面,能看到所有位置的点所在的区域即为半平面的交 因为分段函数的极值只会在转折处或边界取到,所以对于半平面上和地面上的每一个交点都求一下距离就好了 #include<cmath> ...
- MFC使用简单总结(便于以后查阅)
一.资源 共有三个和资源有关的文件:资源头文件resource.h.资源描述文件resource.rc和存放在res文件夹下的具体的资源如图片等. 资源头文件中全部是宏定义,应用程序需要为每个资源都定 ...
- 各数据库连接配置与maven依赖安装
maven用的比较多,所以自己去捣鼓了一下:以下是关于数据库配置的一块,把相关的内容张贴出来,以备不时之需 //MySql 配置文件(maven):pom.xml <dependency> ...
- 分布式系统的Raft算法——在失联阶段这个老Leader的任何更新都不能算commit,都回滚,接受新的Leader的新的更新 意味着还是可能丢数据!!!
过去, Paxos一直是分布式协议的标准,但是Paxos难于理解,更难以实现,Google的分布式锁系统Chubby作为Paxos实现曾经遭遇到很多坑. 来自Stanford的新的分布式协议研究称为R ...
- Filter/replace - VBA
Auto filter: ActiveSheet.Range("A:F").AutoFilter Field:=3, Criteria1:="*Agent*" ...
- javascript-JQuery样式篇(一)
轻量级的JavaScript库,核心依然是JavaScript,不仅兼容了CSS3,还兼容了各种浏览器 强大的选择器,完善的事件机制,出色的Ajax封装,丰富的UI 进入官方网站获取最新的版本 htt ...
- 利用bootsrap控件 实现文件上传功能
源代码实例:https://github.com/kartik-v/bootstrap-fileinput 一.jsp页面 <%@ page language="java" ...