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:在动态获 ...
随机推荐
- phpmyadmin mysqlnd cannot connect to
mysqlnd cannot connect to MySQL 4.1+ using the old insecure authentication. Please use an administra ...
- 高通8X16电池BMS算法（一）【转】
本文转载自:http://www.voidcn.com/blog/yanleizhouqing/article/p-6037399.html 最近一直在搞电源管理相关内容,之前是8610的bms,现在 ...
- 【转】如何在html与delphi间交互代码
[转]如何在html与delphi间交互代码 (2015-11-19 22:16:24) 转载▼ 标签: it 分类: uniGUI uniGUI总群中台中cmj朋友为我们总结了如下内容,对于利用de ...
- Spark-Spark setMaster & WordCount Demo
Spark setMaster源码 /** * The master URL to connect to, such as "local" to run locally with ...
- poj 3666 Making the Grade（dp离散化）
Making the Grade Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 7068 Accepted: 3265 ...
- C#中substring ()的用法
C#中substring ()的用法:http://www.cnblogs.com/bluespace/archive/2007/12/11/782336.html
- 关于IDT报错乱码总结
可算是把我折腾坏了.一筹莫展.最后才把这些问题搞好.有些事不知道做以前,怎么都想不到.发现了方法之后,原来也不过这样.我觉得自己记性太差.还是好好写下来吧.写下来顺便会帮我重新再梳理一遍.原先乱码是因 ...
- JS中的forEach、$.each、map方法推荐
下面小编就为大家带来一篇JS中的forEach.$.each.map方法推荐.小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 orEach是ECMA5中Array新方法中最 ...
- Selenium-几种元素定位方式
#识别元素并操作#一般有如下几种方法,其中id最为常用.这里需要注意识别元素一定要用唯一id 1.find_element_by_id("value") #! /usr/bin/e ...
- AngularJS-Basic（一）
MVC:作为DataModel的$scope 依赖注入DI 模块化Module Service Filter Two way DateBinding Directive Unit Testing&am ...