移动端实现文字轮播_移动端轮播图实现
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)
移动端实现文字轮播_移动端轮播图实现相关推荐
- 滑动轮播_这样运营轮播图可以增加订单
我们都说脸面代表个人名片,那么在小程序中,轮播图就是店铺的脸面,当我们打开网站.APP.小程序等应用的首页,首先映入眼帘的就是轮播图.那么作为店铺脸面的轮播图有什么作用呢?本周我们一起来看看. 轮播图 ...
- 移动端布局三种视口_移动端开发知识[系列] - 视口viewport
移动端H5知识[系列] - 视口viewport HTML5学堂:移动端从2012年走到今日,已经占领了互联网的半壁江山.网站开发也从PC平台向移动端平台开发发展.作为一个优秀的前端开发者,除了能够处 ...
- 移动端怎么让底部固定_移动端排名应该怎么做?两种匹配移动端实战排名干货分享...
关于移动端优化的问题.最近一些兄弟一直在问我应该怎么做?毕竟现在是手机的时代.绝大部分情况下.PC显得有点鸡肋!在讲移动端排名之前.逆冬先来讲两个容易被大家搞错的问题(移动端). 1.逆冬老师你好.我 ...
- 移动端怎么让底部固定_移动端排名应该怎么做?两种匹配移动端实战排名干货分享!...
关于移动端优化的问题.最近一些兄弟一直在问我应该怎么做?毕竟现在是手机的时代.绝大部分情况下.PC显得有点鸡肋!在讲移动端排名之前.逆冬先来讲两个容易被大家搞错的问题(移动端). 1.我观察现在的移动 ...
- python怎么做游戏主播_当游戏主播需要什么条件
展开全部 一.硬件条件: 1.有一台够给力的电脑. 直播流生成.推送,都需要大量的CPU运算,处理器e68a84e8a2ad32313133353236313431303231363533313333 ...
- 单端怎么转差分信号_单端转差分信号电路详解
单端输入指信号有一个参考端和一个信号端构成,参考端一般为地端,差分是将单端信号进行差分变换,输出两个信号,一个和原信号同相,一个和原信号反相.差分信号有较强的抗共模干扰能力,适合较长距离传输,单端信号 ...
- 移动端布局三种视口_移动端适配之视口和meta标签
这是关于移动端适配的第一篇文章,这篇文章主要介绍视口以及和视口有关的meta标签的使用. 不管三七二十一,我们先新建一个页面: 这不是一个demo *{margin: 0; padding: 0;} ...
- 移动端布局三种视口_移动端布局:视口viewport的理解
移动端开发中,有一些基本概念需要理解清楚,才能更好的组织编程逻辑.在刚接触时,移动端视口的缩放和rem单位的缩放搞混淆了,弄得自己很蒙圈.所以仔细总结下自己的理解. 移动端的适配,我理解为两点: 第一 ...
- 移动端安全测试主要涉及_移动端测试之Monkey操作事件和参数
1.键盘事件 键盘事件主要是一些与键盘相关的操作.比如点击输入框.键盘弹起.点击输入框以外区域.键盘收回等.可通过--pct-flip参数来配置其事件百分比. 2.其他类型事件 其他类型事件包括了除前 ...
最新文章
- 唐杰:AI 未来靠迭代
- 算法杂货铺——分类算法之朴素贝叶斯分类(Naive Bayesian classification)
- OpenCV学习记录(二):自己训练haar特征的adaboost分类器进行人脸识别
- C#--数据类型和类型转换
- Boost:双图bimap与mi_bidirectional地图的测试程序
- Ubuntu18.04下安装NFS详细步骤
- .NET开发者必须学习.NET Core
- 解决The‘Access-Control-Allow-Origin‘ header contains multiple values‘*, ....‘, but only one is allowed
- SinoBBD跨入大数据产业发展新模式
- IAR常用快捷键及使用小技巧
- 【2019-1期 QFC素质拓展活动】圆满结束
- 找出一批正整数中的最大偶数_c语言上机题库
- sts4linux,STS3下载和安装,STS4升级
- 软件工程——需求分析
- 数字ic后端学习ing
- 手机模拟器安装证书抓包
- 世界杯为战斗民族的历史再添荣耀与光辉_数字体验_新浪博客
- 路由器 OSPF 动态路由配置
- 树莓派控制PCF8591 AD/DA模块
- windows cmd字典
热门文章
- org.jeecgframework.core.common.exception.MyExceptionHandler]java.lang.NullPointerException
- mysql悲观锁总结和实践
- [实战]MVC5+EF6+MySql企业网盘实战(2)——用户注册
- handler类型的定时器
- 物联网碰到云计算会怎么样?
- java log输出到文件路径_Java - 配置log4j的日志文件路径 (附-获取当前类路径的多种方法)...
- 解决org.springframework.web.multipart.MaxUploadSizeExceededException报错问题
- hadoop为什么出现
- 用户登录提交前,密码加密传输
- catcti监控linux主机,CentOS7搭建Prometheus 监控Linux主机