6、滑屏轮播——无缝循环版
来源:互联网 发布:工农牌糖精淘宝网 编辑:程序博客网 时间:2024/05/17 21:37
6、滑屏轮播——无缝循环版
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,user-scalable=no" /> <title>滑屏轮播——无缝循环版</title> <!-- 需要掌握知识点: 1、无缝循环; --> <!-- 问题:在我自己的安卓手机有滑到end的闪白问题 --> <style id="css"> body{ margin: 0; } #wrap{ overflow: hidden; position: relative; } #list{ margin: 0; padding: 0; list-style: none; } #list li{ float: left; } #list img{ width: 100%; display: block; } #nav{ position: absolute; bottom: 10px; left: 0; width: 100%; text-align: center; } #nav span{ display: inline-block; width: 10px; height: 10px; border-radius: 5px; background: black; } #nav .active{ background: #fff; } .clear:after{/* 用于清除浮动 */ content: ""; display: block; clear: both; } </style> <script type="text/javascript" src="cssTransform.js" ></script> <script> document.addEventListener( //用于阻止系统默认的菜单、文字默认选中、橡皮筋回弹效果 //缺点:系统默认滚动条消失 "touchstart", function(e){ e.preventDefault(); } ); window.onload = function(){ var wrap=document.querySelector('#wrap'); var list=document.querySelector('#list'); list.innerHTML+=list.innerHTML;//把滚动层的内容多复制一份 var lis=document.querySelectorAll('#list li'); var navSpan=document.querySelectorAll('#nav span'); //用JS动态设置wrap的高度和ul、li的width; var css=document.querySelector('#css'); var style="#wrap{height:"+lis[0].offsetHeight+"px}"; style+="#list{width:"+lis.length*100+"%}"; style+="#list li{width:"+(1/lis.length)*100+"%}"; css.innerHTML+=style; var startPoint=0;//用于储存手指按下的坐标 var startX=0;//用于储存手指按下时滚动层UL的translateX位移值 var wrapW=wrap.offsetWidth; cssTransform(list,"translateX",0);//设置滚动层的初始化的translateX值 wrap.addEventListener( "touchstart", function(e){//0,1,2,3, //4,5,6,7 //共8张,原理是当按下时位于0位时,瞬间移动到第4个,因为两张图是一样的所以视觉上不会有感觉 //当按下7位时,瞬间移动到第3个,从而产生无缝循环的感觉。 list.style.transition="none";//为了不在视觉上感觉到,所以要把transition清空,同时也是因为move时不需要transition var translateX=cssTransform(list,"translateX"); var now=-Math.round(translateX/wrapW); if(now==0){//原理是当按下时位于0位时,瞬间移动到第4个,因为两张图是一样的所以视觉上不会有感觉 now=navSpan.length; } if(now==(lis.length-1)){//当按下7位时,瞬间移动到第3个 now=navSpan.length-1; } cssTransform(list,"translateX",-now*wrapW); var touch = e.changedTouches[0]; startPoint=touch.pageX;//移到过后再获取手指按下时手指距离屏幕X轴的距离 startX=cssTransform(list,"translateX");//移到过后再获取手指按下时滚动层UL的translateX位移值 } ); wrap.addEventListener( "touchmove", function(e){ var touch=e.changedTouches[0]; var nowPoint=touch.pageX;//手指移动时手指距离屏幕X轴的距离 var distance=nowPoint-startPoint;//手指移动时距离 cssTransform(list,"translateX",startX+distance);//设置手指移动时的translateX } ); wrap.addEventListener( "touchend", function(){ var translateX=cssTransform(list,"translateX"); //判断移动超过一半时自动移动下一张,未到一半时回到当前张 var now = Math.round(-translateX/wrapW); translateX = -now*wrapW; list.style.transition="0.5s"; cssTransform(list,"translateX",translateX); //下面的pagination跟随图片一起更新位置 for(var i=0,len=navSpan.length;i<len;i++){ navSpan[i].className=""; } //0,1,2,3, //4,5,6,7 //因为navSpan.length为4,lis.length为8,当now>3之后, //now=4 → 4%4 → 0 //now=5 → 5%4 → 1 //now=6 → 6%4 → 2 //now=7 → 7%4 → 3 navSpan[now%navSpan.length].className="active"; } ); } </script> </head> <body> <div id="wrap"><!-- 包裹层 --> <ul id="list" class="clear"><!-- 滑动层 --> <li><a href="#"><img src="img/1.jpg"/></a></li> <li><a href="#"><img src="img/2.jpg"/></a></li> <li><a href="#"><img src="img/3.jpg"/></a></li> <li><a href="#"><img src="img/4.jpg"/></a></li> </ul> <nav id="nav"><!-- 底部按钮 --> <span class="active"></span> <span></span> <span></span> <span></span> </nav> </div> </body></html>
0 0
- 6、滑屏轮播——无缝循环版
- 7、滑屏轮播——自动播放加无缝循环
- 如何高效设计游戏——增强游戏体验游戏背景音乐无缝循环
- 无缝循环滚动图片
- pic无缝循环
- 实现的无缝循环
- 图片无缝循环代码
- uiscrollview 无缝循环滚动
- uiscrollview 无缝循环滚动
- 无缝循环滚动类
- uiscrollview 无缝循环滚动
- 图片无缝循环滚动
- ActionBarSherlock — 无缝集成ActionBar
- UIScrollview 无缝循环滚动实现
- scrollview的无缝循环滚动
- 文字列表循环无缝滚动
- html图片无缝循环移动
- 单元测试实施解惑——无缝整合
- pull方法写XML文件
- 仓促之间写的,有些不足,希望道友们给我建议
- 小程序-- 配置
- Redis入门(四)散列Hash
- 自学Matlab教程资源推荐
- 6、滑屏轮播——无缝循环版
- 轻度解析异步~IProgress<T>
- [Usaco07Jan] Running
- 解决Fiddler不能监听Java HttpURLConnection请求的方法
- kvm及管理工具 libvirt介绍
- [完全平方数 随机化权值Xor] UR #14 A 最强跳蚤
- Java static关键字
- nginx使用ssl模块配置HTTPS支持
- OnTriggerEnter和OnCollisionEnter的区别和用法