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:在动态获 ...
随机推荐
- sdut oj 操作系统实验--SSTF磁盘调度算法【操作系统算法】
操作系统实验--SSTF磁盘调度算法 Time Limit: 1000ms Memory limit: 65536K 有疑问?点这里^_^ 题目描述 磁盘调度在多道程序设计的计算机系统中,各个进 ...
- 亚马逊EC2服务器登录方法
1.根据官网提供的方法登录连接到EC2服务器(官网推荐windows用户使用PUTTY连接) 2. 创建root的密码,输入如下命令: sudo passwd root 3.然后会提示你输入new p ...
- Linux- 运维
Linux运维遇到需要使用命令 查看Linux系统有多少用户 cat /etc/passwd | wc -l 查看用户占用的uid,默认情况下,ldap新增的用户和系统本地的用户uid是混在一起.在新 ...
- CSS: iPhone Custom CSS
1. [代码][CSS]代码 <style type="text/css" media="screen"> /* iPhone 4@media on ...
- 常见ETL工具一览，你知多少？
这些年,几乎都与ETL打交道,接触过多种ETL工具.现将这些工具做个整理,与大家分享. 一 ETL工具[国外] 1. datastage点评:最专业的ETL工具,价格不菲,使用难度一般 下载地址:ft ...
- spring boot: 一般注入说明(四) Profile配置，Environment环境配置 @Profile注解
1.通过设定Environment的ActiveProfile来设置当前context所需要的环境配置,在开发中使用@Profile注解类或方法,达到不同情况下选择实例化不同的Bean. 2.使用jv ...
- php 数组分页
$p = max(1, I('param.p',1,'intval')); $count = count($date); $Page = new Page($count,15); $Page-> ...
- Delphi TcxComboBox控件说明
属性: Text:ComboBox 的文本信息 EditText: 也是给ComboBox 的文本信息赋值,但不同的是 给Text赋值会 触发 Change事件,也会触发 EditvaluesChan ...
- GridView内容详解(转载)
GridView内容详解(转载) GridView是ASP.NET界面开发中的一个重要的控件,对GridView使用的熟练程度直接影响软件开发的进度及功能的实现.(车延禄)GridView的主要新特性 ...
- linux命令学习笔记（40）：wc命令
Linux系统中的wc(Word Count)命令的功能为统计指定文件中的字节数.字数.行数,并将统计结果显示输出. ．命令格式: wc [选项]文件... ．命令功能: 统计指定文件中的字节数.字数 ...