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. java 遍历数组的几种方式

    本文总结自: https://www.cnblogs.com/hellochennan/p/5373186.html 1. 传统方式 非常简单的for循环 int[] a = {1, 2, 3, 4} ...

  2. ACM,我回来了!

    经过两天的时间,到了家一趟! 我终于又重新回到ACM实验室了!,有点头晕啊!!!

  3. Spring Cloud之Hystrix服务保护框架

    服务保护利器 微服务高可用技术 大型复杂的分布式系统中,高可用相关的技术架构非常重要. 高可用架构非常重要的一个环节,就是如何将分布式系统中的各个服务打造成高可用的服务,从而足以应对分布式系统环境中的 ...

  4. 转战github了

    现在已经改在github写博客了,地址为http://connorzhangxu.github.io/ 博客园用了几年,总体感觉不错,但是对公式的支持整体不是很好,所以后来自己搭建了github博客, ...

  5. Jquery实现动态导航栏和轮播导航栏

    动态导航栏和轮播导航栏的实现思想: 利用jquery技术的append()方法和bind()方法实现li标签的添加和点击事件绑定,在利用$getJSON(url,data,function)请求方法实 ...

  6. jQuery cookie 实现记住用户名和密码功能

    jQuery cookie 实现记住用户名和密码功能 HTML代码 <div class="wrap"> <div class="line-top&qu ...

  7. django1.8.2 建站实现分页显示功能

    个人经验: django先写view,在再写url,最后写html文件. 要实现某个功能,先google查找相关文章,在到文档中寻找相关章节,最后本地实现功能. 1.django1.8.2 实现分页功 ...

  8. 十五 Django框架,缓存

    由于Django是动态网站,所有每次请求均会去数据进行相应的操作,当程序访问量大时,耗时必然会更加明显,最简单解决方式是使用:缓存,缓存将一个某个views的返回值保存至内存或者memcache中,5 ...

  9. 一些有意思的面试题(持续更新) .C语言编程技巧札记

    一些有意思的面试题(持续更新) http://blog.csdn.net/wangyuling1234567890/article/details/38565239 C语言编程技巧札记 http:// ...

  10. 动态规划 两个字符串之间的编辑距离 leetcode72

    public static int minDistance(String word1, String word2) { char[] s1 = word1.toCharArray(); char[] ...