求移动端HTML5 和js 实现手机滑动banner具体原理及实现过程代码?不要说插件什么的。

#麻辣小龙虾# 2017-02-24 04:36:12
求移动端HTML5 和js 实现手机滑动banner具体原理及实现过程代码?不要说插件什么的。

http://www.swiper.com.cn/

类似于swiper 手机端banner滑动切换的效果,要实现思路及具体过程,因为不想老调用插件,但不明白实现原理,这样不利于进步跟思维拓展。
...全文
753 7 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
7 条回复
切换为时间正序
请发表友善的回复…
发表回复
mjomjozhu 2017-04-02
  • 打赏
  • 举报
回复
我写了个滑块的插件你可以看看https://github.com/aooy/ice-skating,准备写篇博客说说原理
业余草 2017-03-06
  • 打赏
  • 举报
回复
<!DOCTYPE html><html><head><meta charset="utf-8"><title>banner切换实现</title><style type="text/css">/** @description: banner切换样式* @author: lanfeng(beryl)* @time:2013-02-26*//* reset*/*{ margin: 0; padding: 0;}body{font:12px/1.5 Tahoma,'/5B8B/4F53',arial,Tahoma,helvetica,sans-serif; color:#333333;background-color:#ffffff;position:relative; }h1,h2,h3,h4,h5,h6{font-size:100%}address,em{font-style:normal;}code,kbd,pre,samp{font-family:courier new,courier,monospace;}ul,ol{list-style:none outside none;}fieldset,img{border:0;}img{vertical-align:middle}table{border-collapse:collapse;border-spacing:0;font-size:inherit;*font-size:100%;}input,button,textarea,select{vertical-align:middle;font:100% Helvetica,Arial,sans-serif; color:inherit}.clearfix:after{content:'.';display:block;height:0;clear:both;visibility:hidden;}.clearfix{*zoom:1;}.clear{font-size:0;line-height:0;height:0;clear:both;visibility:hidden;overflow:hidden;}.d-ftab{ width:510px; height: 180px;position: relative; margin: 100px auto;}.d-fShow ul li{ float: left; width: 510px; height: 180px;}.d-fShow{ width: 510px; height: 180px; overflow: hidden;}.d-fShow img{ width: 510px; height: 180px; float: left;}.d-fs-control{ position: absolute; width:510px; position: absolute; left: 0; bottom: 0; height: 25px; line-height: 25px;background: rgba(0,0,0,0.4);filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#66000000',EndColorStr='#66000000') ; }:root .d-fs-control{filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#66000000',EndColorStr='#66000000')/9 ;}.d-fs-control ul{ position: absolute; bottom:3px; right: 5px; height: 16px;}.d-fs-control ul li{width:16px;height:16px; background:#777675;border-radius: 2px 2px 2px 2px; float:left;margin-left:5px;color:#dcdcdc;text-align:center;font-weight:700;cursor:pointer;line-height:16px;filter: alpha(opacity=70); opacity: 0.7;}.d-fs-control ul li:hover,.d-fs-control ul li.select{background:#ffffff;color:#ff6700;}</style><script type="text/javascript" src="js/jquery-1.4.2.min.js"></script><script type="text/javascript">$(function(){var wrap =$('.d-ftab');var imgs = wrap.find('.d-fShow ul >li');var len=imgs.length ;var tabTime=100;var outTime=4000;var select='select';var num =0 ;var interval;var type = 'click';var btns=wrap.find('.d-fs-control ul>li');btns.bind(type,function(){var _this=$(this);_this.addClass('select').siblings ().removeClass('select');num=_this.prevAll().length;imgs.stop().eq(num).fadeTo(tabTime,1) ;imgs.not(':eq('+num+')').filter(':visible').fadeOut(tabTime) ;return false;}).eq(num).trigger(type);var interFunc=function(){num=(num+1)%len;btns.eq(num).triggerHandler(type);}wrap.bind('mouseover',function(){clearInterval(interval);}).bind('mouseout',function(){interval=setInterval(interFunc,outTime)})})</script></head><body><div class="d-ftab"><div class="d-fShow"><ul><li><a href="#"><img alt="" src=" images/1.jpg"/></a></li><li ><a href="#"><img alt="" src="images/2.png"></a></li><li><a href="#"><img alt="" src="images/3.jpg"></a></li><li><a href=""><img alt="" src="images/4.jpg"></a></li><li><a href="#"><img alt="" src="images/5.jpg"></a></li></ul></div><div class="d-fs-control"><ul><li>1</li><li>2</li><li>3</li><li>4</li><li class="select">5</li></ul></div></div></body></html>
业余草 CODE大全
#麻辣小龙虾# 2017-03-05
  • 打赏
  • 举报
回复
顶顶顶顶顶哈
#麻辣小龙虾# 2017-03-04
  • 打赏
  • 举报
回复
自己顶起来哈
#麻辣小龙虾# 2017-02-26
  • 打赏
  • 举报
回复
引用 1 楼 functionsub 的回复:
touchstart的时候获取位置 touchend的时候再获取位置 2个位置减一下,判断是不是需要滑动,需要滑动的话,列表对应的节点增加CSS3动画效果样式。 就是这么简单咯。
大神可怜我这个小白给个demo代码参考研究下吧,非常感谢!
functionsub 2017-02-24
  • 打赏
  • 举报
回复
touchstart的时候获取位置 touchend的时候再获取位置 2个位置减一下,判断是不是需要滑动,需要滑动的话,列表对应的节点增加CSS3动画效果样式。 就是这么简单咯。

87,996

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧