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实现左右滑动图片的更多相关文章

  1. 手机触屏滑动图片切换插件swiper.js

    今天给大家分享一款手机触屏滑动图片切换插件swiper.js是一款swiper手机触屏滑动图片幻灯片,适合各种尺寸.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  2. js鼠标滑动图片显示隐藏效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. Android 使用ViewPager实现左右循环滑动图片

    ViewPager这个小demo实现的是可以左右循环滑动图片,下面带索引,滑到最后一页在往右滑动就要第一页,第一页往左滑动就到最后一页,先上效果图,用美女图片是我一贯的作风,呵呵 1.    首先看一 ...

  4. ios7中使用scrollview来横向滑动图片，自动产生偏移竖向的偏移 问题

    ios7中使用scrollview来横向滑动图片,自动产生偏移竖向的偏移 问题     如图红色为scrollview的背景色,在scrollview上加了图片之后,总会有向下的偏移 设置conten ...

  5. appium 学习各种小功能总结--功能有《滑动图片、保存截图、验证元素是否存在、》---新手总结（大牛勿喷，新手互相交流）

    1.首页滑动图片点击 /** * This Method for swipe Left * 大距离滑动 width/6 除数越大向左滑动距离也越大. * width:720 *height:1280 ...

  6. 滑动验证 和滑动图片验证JS

    滑动验证 先放效果图 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  7. react使用ant design pro时的滑动图片组件

    react的滑动图片验证,是基于https://segmentfault.com/a/1190000018309458?utm_source=tag-newest做的修改,改动的主要有以下几点: 1. ...

  8. c# 简单的滑动图片验证

    普通的验证码对用户使用体验不友好,出现了滑动图片验证的验证方式,用户只要按住滑块完成图片的拼接即可通过验证(这是最简单的方式,滑动轨迹,数据分析,滑行速度 什么的暂没考虑) 主要的实现思路: 1.先从 ...

  9. 解决问题：swiper动态加载图片后无法滑动

    原因:swiper在初始化的时候会扫描swiper-wrapper下面的swiper-slide的个数,从而完成初始化,但是由于动态加载时在初始化之后的动作,所以导致无法滑动. 解决方案 1:在动态获 ...

随机推荐

  1. 自顶向下归并排序（Merge Sort）

    一.自顶向下的归并排序思路: 1.先把数组分为两个部分. 2.分别对这两个部分进行排序. 3.排序完之后,将这两个数组归并为一个有序的数组. 重复1-3步骤,直到数组的大小为1,则直接返回. 这个思路 ...

  2. linux raid技术

    一.概念 磁盘阵列(Redundant Arrays of Independent Disks,RAID),有“独立磁盘构成的具有冗余能力的阵列”之意.是为了提高文件在磁盘上的读写速度而研究出来的. ...

  3. java: jsp:param中文乱码

    java: jsp:param中文乱码 假如a.jsp/b.jsp文件中 a.jsp代码: 需要加入:request.setCharacterEncoding("UTF-8")  ...

  4. Android 之 Matrix（转）

    原文:http://www.cnblogs.com/qiengo/archive/2012/06/30/2570874.html#code Android Matrix   Matrix的数学原理 平 ...

  5. Hibernate - POJO 类和数据库的映射文件*.hbm.xml

    POJO 类和关系数据库之间的映射可以用一个XML文档来定义. 通过 POJO 类的数据库映射文件,Hibernate可以理解持久化类和数据表之间的对应关系,也可以理解持久化类属性与数据库表列之间的对 ...

  6. freeMarker（十）——模板语言之内建函数

    学习笔记,选自freeMarker中文文档,译自 Email: ddekany at users.sourceforge.net 1.字符串内建函数 这些内建函数作用于表达式左侧的字符串值. 如果左侧 ...

  7. VC用MCI播放mp3等音乐文件

    VC播放mp3等音乐文件,可以使用MCI.MCI ( Media Control Interface ) ,即媒体控制接口,向基于Windows操作系统的应用程序提供了高层次的控制媒体设备接口的能力. ...

  8. 省选/NOI刷题Day1

    bzoj4864 Splay乱搞 bzoj3669 正解LCT,考虑上下界的spfa可过 bzoj3668 位运算 暴力 bzoj3670 KMP DP bzoj3671 含有最小的一个数的路径一定比 ...

  9. bzoj 4817: [Sdoi2017]树点涂色 LCT+树链剖分+线段树

    题目: Bob有一棵n个点的有根树,其中1号点是根节点.Bob在每个点上涂了颜色,并且每个点上的颜色不同. 定义一条路径的权值是:这条路径上的点(包括起点和终点)共有多少种不同的颜色. Bob可能会进 ...

  10. stackoverflow打开慢

    C:\Windows\System32\drivers\etc 下的hosts文件最下面添加 127.0.0.1  ajax.googleapis.com