移动端实现文字轮播_移动端轮播图实现

1：HTML样式

*{

margin: 0;

padding: 0;

}

html,body{height: 100%;overflow: hidden;}

#wrap{height: 100%;overflow: hidden;}

.carousel-wrap{position: relative;}

.carousel-wrap > .list{list-style: none;overflow: hidden;position: absolute;}

.carousel-wrap > .list > li{float: left;}

.carousel-wrap > .list > li > a,

.carousel-wrap > .list > li > a >img{display: block;}

.carousel-wrap > .list > li > a >img{width: 100%;}

.carousel-wrap > .points-wrap{position: absolute;bottom: 0;width: 100%;text-align: center;z-index: 1;}

.carousel-wrap > .points-wrap > span{display: inline-block;width: 10px;height: 10px;border-radius: 50%;

background: green;margin-left:5px;}

.carousel-wrap > .points-wrap > span.active{background: deeppink;}

window.οnlοad=function(){

document.addEventListener("touchstart",function(ev){

ev=ev||event;

ev.preventDefault();

});

var arr=["img/01.jpg","img/02.jpg","img/03.jpg","img/04.jpg","img/05.jpg"]

damu.carousel(arr);

}

2：组件

;(function(w){

w.damu = {};

w.damu.css=function (node,type,val){

if(typeof node ==="object" && typeof node["transform"] ==="undefined" ){

node["transform"]={};

}

if(arguments.length>=3){

//设置

var text ="";

node["transform"][type] = val;

for( item in node["transform"]){

if(node["transform"].hasOwnProperty(item)){

switch (item){

case "translateX":

case "translateY":

text += item+"("+node["transform"][item]+"px)";

break;

case "scale":

text += item+"("+node["transform"][item]+")";

break;

case "rotate":

text += item+"("+node["transform"][item]+"deg)";

break;

}

}

}

node.style.transform = node.style.webkitTransform = text;

}else if(arguments.length==2){

//读取

val =node["transform"][type];

if(typeof val === "undefined"){

switch (type){

case "translateX":

case "translateY":

case "rotate":

val =0;

break;

case "scale":

val =1;

break;

}

}

return val;

}

}

w.damu.carousel=function (arr){

//布局

var carouselWrap = document.querySelector(".carousel-wrap");

if(carouselWrap){

var pointslength = arr.length;

//无缝

var needCarousel = carouselWrap.getAttribute("needCarousel");

needCarousel = needCarousel == null?false:true;

if(needCarousel){

arr=arr.concat(arr);

}

var ulNode = document.createElement("ul");

var styleNode = document.createElement("style");

ulNode.classList.add("list");

for(var i=0;i

ulNode.innerHTML+='

';

}

styleNode.innerHTML=".carousel-wrap > .list > li{width: "+(1/arr.length*100)+"%;}.carousel-wrap > .list{width: "+arr.length+"00%}";

carouselWrap.appendChild(ulNode);

document.head.appendChild(styleNode);

var imgNodes = document.querySelector(".carousel-wrap > .list > li > a >img");

setTimeout(function(){

carouselWrap.style.height=imgNodes.offsetHeight+"px";

},100)

var pointsWrap = document.querySelector(".carousel-wrap > .points-wrap");

if(pointsWrap){

for(var i=0;i

if(i==0){

pointsWrap.innerHTML+='';

}else{

pointsWrap.innerHTML+='';

}

}

var pointsSpan = document.querySelectorAll(".carousel-wrap > .points-wrap > span");

}

/*滑屏

* 1.拿到元素一开始的位置

* 2.拿到手指一开始点击的位置

* 3.拿到手指move的实时距离

* 4.将手指移动的距离加给元素

* */

var index =0;

//手指一开始的位置

var startX = 0;

//元素一开始的位置

var elementX = 0;

//var translateX =0;

carouselWrap.addEventListener("touchstart",function(ev){

ev=ev||event;

var TouchC = ev.changedTouches[0];

ulNode.style.transition="none";

//无缝

/*点击第一组的第一张时 瞬间跳到第二组的第一张

点击第二组的最后一张时 瞬间跳到第一组的最后一张*/

//index代表ul的位置

if(needCarousel){

var index = damu.css(ulNode,"translateX")/document.documentElement.clientWidth;

if(-index === 0){

index = -pointslength;

}else if(-index ==(arr.length-1)){

index = -(pointslength-1)

}

damu.css(ulNode,"translateX",index*document.documentElement.clientWidth)

}

startX=TouchC.clientX;

//elementX=ulNode.offsetLeft;

//elementX=translateX;

elementX=damu.css(ulNode,"translateX");

//清楚定时器

clearInterval(timer);

})

carouselWrap.addEventListener("touchmove",function(ev){

ev=ev||event;

var TouchC = ev.changedTouches[0];

var nowX = TouchC.clientX;

var disX = nowX - startX;

//ulNode.style.left = elementX+disX+"px";

/*translateX = elementX+disX;

ulNode.style.transform = 'translateX('+translateX+'px)';*/

damu.css(ulNode,"translateX",elementX+disX);

})

carouselWrap.addEventListener("touchend",function(ev){

ev=ev||event;

//index抽象了ul的实时位置

//var index = ulNode.offsetLeft/document.documentElement.clientWidth;

//var index = translateX/document.documentElement.clientWidth;

index = damu.css(ulNode,"translateX")/document.documentElement.clientWidth;

index = Math.round(index);

//超出控制

if(index>0){

index=0;

}else if(index<1-arr.length){

index=1-arr.length;

}

xiaoyuandian(index);

ulNode.style.transition=".5s transform";

//ulNode.style.left = index*(document.documentElement.clientWidth)+"px";

/*translateX=index*(document.documentElement.clientWidth);

ulNode.style.transform ='translateX('+translateX+'px)';*/

damu.css(ulNode,"translateX",index*(document.documentElement.clientWidth));

//开启自动轮播

if(needAuto){

auto();

}

})

//自动轮播

var timer =0;

var needAuto = carouselWrap.getAttribute("needAuto");

needAuto = needAuto == null?false:true;

if(needAuto){

auto();

}

function auto(){

clearInterval(timer);

timer=setInterval(function(){

if(index == 1-arr.length){

ulNode.style.transition="none";

index = 1-arr.length/2;

damu.css(ulNode,"translateX",index*document.documentElement.clientWidth);

}

setTimeout(function(){

index--;

ulNode.style.transition="1s transform";

xiaoyuandian(index);

damu.css(ulNode,"translateX",index*document.documentElement.clientWidth);

},50)

},2000)

}

function xiaoyuandian(index){

if(!pointsWrap){

return;

}

for(var i=0;i

pointsSpan[i].classList.remove("active");

}

pointsSpan[-index%pointslength].classList.add("active");

}

}

}

})(window)

;(用来对transform属性的操作

;function(w){

w.damu = {};

w.damu.css=function (node,type,val){

if(typeof node ==="object" && typeof node["transform"] ==="undefined" ){

node["transform"]={};

}

if(arguments.length>=3){

//设置

var text ="";

node["transform"][type] = val;

for( item in node["transform"]){

if(node["transform"].hasOwnProperty(item)){

switch (item){

case "translateX":

case "translateY":

text += item+"("+node["transform"][item]+"px)";

break;

case "scale":

text += item+"("+node["transform"][item]+")";

break;

case "rotate":

text += item+"("+node["transform"][item]+"deg)";

break;

}

}

}

node.style.transform = node.style.webkitTransform = text;

}else if(arguments.length==2){

//读取

val =node["transform"][type];

if(typeof val === "undefined"){

switch (type){

case "translateX":

case "translateY":

case "rotate":

val =0;

break;

case "scale":

val =1;

break;

}

}

return val;

}

}

})(window)

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/550217.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

jQuery模糊选择

jQuery模糊选择

属性字头选择器&#xff08;Attribute Contains Prefix Selector&#xff09; jQuery 属性字头选择器的使用格式是 jQuery(‘[attribute|value]‘) &#xff0c;例如 jQuery(‘[herflang|en]‘) 这句代码执行时将会选择文档中所有含有 herflang 属性&#xff0c;并且 herflang …
阅读更多...
maya批量操作mel_MAYA对多个模型使用当前设置批量渲染并保存图片的MEL脚本

maya批量操作mel_MAYA对多个模型使用当前设置批量渲染并保存图片的MEL脚本

更新日志2018-10-23&#xff1a;添加了对文件名为定长数字(0000, 0001, 0002, ect.)的模型的支持&#xff1b;输出图片扩展名使用渲染设置中的扩展名。有时候需要对一组模型使用相同的材质和相同的渲染设置渲染并保存为图片&#xff0c;以往只能一个个手动导入、替换材质、渲染…
阅读更多...
高中计算机学业水平测试知识点总结,高中化学学业水平测试知识点总结

高中计算机学业水平测试知识点总结,高中化学学业水平测试知识点总结

高中化学学业水平测试知识点总结大家有总结吗&#xff1f;下面小编整理了高中化学学业水平测试知识点总结&#xff0c;欢迎大家参考借鉴&#xff01;高中化学学业水平测试知识点总结第一章从实验学化学 第一节化学实验基本方法一.化学实验安全1. 遵守实验室规则。2. 了解安全措…
阅读更多...
oracle19c的版本号_升级到 oracle 19c 的版本差异

oracle19c的版本号_升级到 oracle 19c 的版本差异

引用自&#xff1a; Doc ID 1577660.1升级到19c的升级兼容性能够直接升级到Oracle Database 19c的数据库最小版本源库目标库18 (所有版本)19c12.2.0.119c12.1.0.219c11.2.0.419c其他未在上面提到的数据库发布/版本不支持直接升级到19c。所以首先升级到中间Oracle数据库版本&…
阅读更多...
旋转变换，对某个点进行绕x，y，z的变换。

旋转变换，对某个点进行绕x，y，z的变换。

简介 旋转变换&#xff0c;对某个点进行绕x&#xff0c;y&#xff0c;z的变换。 代码 #include <iostream> #include <vector> #include <algorithm> // -------------------- OpenMesh using namespace std; #define PI 3.1415926static void MatVec3(const…
阅读更多...
chrome html 读写文件路径,Chrome浏览器支持直接读写本地文件了

chrome html 读写文件路径,Chrome浏览器支持直接读写本地文件了

本文首发于公众号&#xff1a;符合预期的CoyPan写在前面最新版的Chrome(Chrome 83, 须要开启权限)支持直接读写本地文件了。javascript开启方法&#xff1a;Chrome浏览器升级到83版本以上&#xff1b;访问chrome://flags/&#xff0c;开启 Native File System API 选项当前如何…
阅读更多...
最长单调递增子序列_最长递增子序列（动态规划 + 二分搜索）

最长单调递增子序列_最长递增子序列（动态规划 + 二分搜索）

题目给定数组arr&#xff0c;返回arr的最长递增子序列举例&#xff1a;arr [2,1,5,3,6,4,8,9,7]&#xff0c;返回的最长递增子序列为[1,3,4,8,9]要求&#xff1a;如果arr的长度为N&#xff0c;请实现时间复杂度为O(nlogn)的方法。分析这一题也是经典的动态规划&#xff0c;那么…
阅读更多...
在正式使用计算机账务系统的银行对账功能,用友ERP-U8管理系统认证考试理论题...

在正式使用计算机账务系统的银行对账功能,用友ERP-U8管理系统认证考试理论题...

《电算化会计》自测题(理论部分附答案)一、判断题&#xff1a;1.系统管理是用友ERP管理系统的运行基础&#xff0c;它为其他子系统提供了公共的账套、年度账及其它相关基础数据&#xff0c;各子系统的操作员也需要在系统管理中统一设置并分配权限。√2.用户自动拥有所属角色所拥…
阅读更多...
数据异常排查

数据异常排查

数据异常是每个数据分析师最常见的工作之一&#xff0c;大部分人缺乏方法论&#xff0c;排查起来没有方向感和层次感&#xff0c;这里看看&#xff0c;那里看看&#xff0c;非常耽误时间&#xff0c;可能最后也没有结果。所以&#xff0c;需要认真去制定一套标准化流程去做这件…
阅读更多...
二叉排序树（BinarySortTree）

二叉排序树（BinarySortTree）

相关知识&#xff1a; 二叉树是每个节点最多有两个子树的树结构。通常子树被称作“左子树”&#xff08;left subtree&#xff09;和“右子树”&#xff08;right subtree&#xff09;。 二叉树中的左右子树不可随意交换。 根节点&#xff1a;一棵树最上面的节点称为根节点。 父…
阅读更多...
fpga初始化错误_FPGA复位设计常见问题及处理方法

fpga初始化错误_FPGA复位设计常见问题及处理方法

一开始接触到FPGA&#xff0c;肯定都知道”复位“&#xff0c;即简单又复杂。简单是因为初学时&#xff0c;只需要按照固定的套路——按键开关复位&#xff0c;见寄存器就先低电平复位一次&#xff0c;这样一般情况可以解决99%的问题&#xff0c;甚至简单的设计&#xff0c;就不…
阅读更多...
惠普台式计算机系列,惠普发布设计笔记本、设计台式电脑等Z系列产品

惠普台式计算机系列,惠普发布设计笔记本、设计台式电脑等Z系列产品

惠普发布新一代惠普Z系列产品&#xff0c;包含设计笔记本、设计台式电脑、显示器和VR等产品。惠普Z系列设计笔记本HP ZBook 14u G6配有4K显示屏&#xff0c;支持100% Adobe RGB色域显示&#xff0c;拥有600尼特亮度&#xff0c;满足创意族群对色彩的精确要求。HP ZBook 15u G6图…
阅读更多...
计算机应用需要英语水平,英语对计算机专业的重要性及如何提高英语水平

计算机应用需要英语水平,英语对计算机专业的重要性及如何提高英语水平

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼计算机研发人员要掌握的专业英语要求教高&#xff0c;必须掌握大量的专业术语和缩略语; 熟练掌握语法和惯用法的表达方式和功能; 能阅读英文文档和技术资料&#xff0c;阅读熟读在100词/分钟以上; 能借助字典翻译专业技术图书; 能使…
阅读更多...
python asyncio 并发编程_asyncio并发编程

python asyncio 并发编程_asyncio并发编程

一. 事件循环1.注&#xff1a;实现搭配&#xff1a;事件循环回调(驱动生成器【协程】)epoll(IO多路复用)&#xff0c;asyncio是Python用于解决异步编程的一整套解决方案&#xff1b;基于asynico&#xff1a;tornado&#xff0c;gevent&#xff0c;twisted(Scrapy&#xff0c;dj…
阅读更多...
ORM多表操作之多对多查询

ORM多表操作之多对多查询

创建多对多的关系 authormodels.ManyToManyFleld(" ") 　(推荐) 书籍对象它的所有关联作者　book_obj.authors.all() 掌握&#xff1a;通过filter values(双下划线)进行多对多的关联查询&#xff08;形式一对多&#xff09; django是将python语句翻译成sql语句执行 聚…
阅读更多...
计算机的iscsi配置,我们将了解如何设置自己的支持iscsi配置的存储节点

计算机的iscsi配置,我们将了解如何设置自己的支持iscsi配置的存储节点

iSCSI代表Internet小型计算机系统接口。它用于使用块级数据传输通过TCP / IP访问网络上的存储。NFS与iSCSI之间通常存在比较。关键区别在于NFS是文件级实现&#xff0c;而iSCSI是块级实现。这适用于TCP / IP层&#xff0c;并允许通过局域网(LAN)发送SCSI命令。在诸如iSCSI和光纤…
阅读更多...
介词for和with 和of的用法_英语中的for,to,at,of,in,on,with的用法

介词for和with 和of的用法_英语中的for,to,at,of,in,on,with的用法

英语中的for,to,at,of,in,on,with的用法英语中的for,to,at,of,in,on,with的用法人气&#xff1a;594 ℃时间&#xff1a;2019-11-07 00:56:02优质解答一、介词按其构成可分为&#xff1a;1.简单介词 at,in,on,to,since,until 等.如&#xff1a;Hes worked there since 1998.2.复…
阅读更多...
转帖：解决System.Data.OracleClient requires Oracle client software version 8.1.7 or greater

转帖：解决System.Data.OracleClient requires Oracle client software version 8.1.7 or greater

原帖&#xff1a;http://blog.csdn.net/killer000777/archive/2008/12/03/3438519.aspx 原来当Oracle 9.2运行在NTFS的分区上时&#xff0c;对于某些非administrator组的用户&#xff0c;ORACLE_HOME 目录是不可见的&#xff0c;而在windows server 2003下Asp.net应用使用的帐户…
阅读更多...
超级计算机发展及现状论文,浅谈超级计算机发展的过程及研究现状

超级计算机发展及现状论文,浅谈超级计算机发展的过程及研究现状

摘要&#xff1a;当前,多核技术的不断发展和日渐成熟,使得处理器的性能得到巨大提升.但是对于存储设备来说,无论是速度还是容量都无法跟上这种步伐.随着处理器和其它子系统发展差距的日益加大,超级计算机的效率问题逐渐成为人们讨论和研究的热点,大部分的实际应用在超级计算机上…
阅读更多...
P1047 校门外的树 Noip2005普及组第二题

P1047 校门外的树 Noip2005普及组第二题

洛谷红题&#xff08;咳咳&#xff09;>>>>点击跳转 题目描述 某校大门外长度为L的马路上有一排树&#xff0c;每两棵相邻的树之间的间隔都是11米。我们可以把马路看成一个数轴&#xff0c;马路的一端在数轴00的位置&#xff0c;另一端在LL的位置&#xff1b;数轴上…
阅读更多...
最新文章

Copyright @ 2022~2023