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:在动态获 ...
随机推荐
- 深入理解JVM - 早期（编译期）优化
Java“编译期”是一段“不确定”的操作过程:可能是指一个前端编译器(编译器的前端)把*.java文件转变为*.class文件的过程:可能是指虚拟机的后端运行期编译器(JIT编译器,Just In T ...
- Tstrings类简单介绍及实例
用TStrings保存文件;var S: TStrings;begin S := TStringList.Create(); { ... } S.SaveToFile('config.txt' ...
- Spring Boot -- actuator
Spring Boot有四大神器,分别是auto-configuration.starters.cli.actuator,本文主要讲actuator.actuator是spring boot提供的对应 ...
- c#子线程执行完怎么通知主线程
定义一个委托实现回调函数 public delegate void CallBackDelegate(string message); 程序开始的时候 //把回调的方法给委托变量 CallBackDe ...
- 时间复杂度O(n)与空间复杂度O(1)
把输入规模看成x轴,所花时间/空间看成y轴.O(n)就是 y = x, y随x的增长而线性增长.一条斜线O(1)就是 y = 1,不管x如何变,y不变.一条与x平行的线 举个简单的例子,要从0加到n, ...
- leetcode 258. Add Digits(数论)
Given a non-negative integer num, repeatedly add all its digits until the result has only one digit. ...
- conda 里的 jupyter
1. 安装conda https://mirrors.tuna.tsinghua.edu.cn/anaconda/ 下载并安装. 2. 安装jupyter (1)在ananconda主环境安装:pip ...
- 【Python】正则表达式中使用变量
我们有时想把变量放进正则表达式中来匹配想要的结果.Python中使用 re.compile(r''+变量+''),其中正则表达式中的“变量”应为字符串形式. import re regex_test_ ...
- JS性能之滚动条之外的其他部分
问题: 如果一个页面宽高比较大,也就是页面需要滚动条来查看其他页面内容,这时候,在滚动条之外的其他部分,是依然处于运行状态. 比如那部分有视频播放,则那些视频虽然在当前窗口看不到,但它们还是会处于播放 ...
- docker-建立私有registry
我们知道可以使用hub.docker.com作为我们公共或者私有的registry.但由于服务器在国外的原因,网速会非常的慢.所以我们在利用docker开发构建容器服务时,我们希望能够建立自己的私有r ...