首页 > 代码库 > 手机网页轮播切换，简易版
手机网页轮播切换，简易版
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <meta name="format-detection"content="telephone=no"> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <title>手机轮播</title></head><style>*{ padding:0; margin:0;}ul,li{ list-style:none;}body{ width:100%; overflow: hidden;}.mt10{margin-top:10px;}.mt20{margin-top:20px;}.nav{ width:100%; height:40px; line-height:40px; display:-webkit-box; -webkit-box-orient:horizontal; background:orange;}.nav li{ width:20%; text-align: center;}.nav li a{ color:#fff; text-decoration:none; font-weight:bold; display: block; transition:all .2s ease-in;}.nav li a:hover{ background:rgba(225,225,225,.5);}#box{ background:#f0f0f0; height:250px; overflow:hidden;}.img-list{ display:-webkit-box; -webkit-box-orient:horizontal; transition:all .2s ease-in;}.img-list li{ display:-webkit-box; -webkit-box-pack:center; -webkit-box-align:center; -webkit-transform:translate3d(0,0,0);}</style><body> <header> <nav> <ul class="nav"> <li><a href="#">首页</a></li> <li><a href="#">导航</a></li> <li><a href="#">产品</a></li> <li><a href="#">联系</a></li> <li><a href="#">地址</a></li> </ul> </nav> </header> <section class="mt10" id="box"> <ul class="img-list"> <li><a href="#"><img src="http://pic.jxnews.com.cn/0/02/40/67/2406711_955318.jpg" alt=""></a></li> <li><a href="#"><img src="http://www.xingbar.com.cn/pmap/16beac34dae343313080d02ea07c0ddd.bmp" alt=""></a></li> <li><a href="#"><img src="http://www.bdall.com/attachments/2014/01/1880_201401141612351qo4J.thumb.jpg" alt=""></a></li> <li><a href="#"><img src="http://www.easyhomehouseware.com/img/aHR0cDovL25jYXIuY2MvYXR0YWNobWVudHMvMjAxMS8wNC8xXzIwMTEwNDIwMTcwMzI0MVdlZTIudGh1bWIuanBn.jpg" alt=""></a></li> <li><a href="#"><img src="http://www.bdall.com/attachments/2012/01/156142_2012013110372932hh7.thumb.jpg" alt=""></a></li> </ul> </section><script> function Slider(options) { this.box = options.box; //获取dom元素方法 this.getDom(); this.goSlider(); } Slider.prototype.getDom = function() { //获取窗口宽度 this.windowWidth = window.innerWidth; //获取dom元素 var box = this.box; this.ul = box.getElementsByTagName(‘ul‘)[0]; var ul = this.ul; this.li = ul.getElementsByTagName(‘li‘); var li = this.li; box.style.width = this.windowWidth +‘px‘; for(var i = 0 , len = li.length ; i < len ; i++ ) { li[i].style.width = this.windowWidth +‘px‘; } ul.style.width = this.windowWidth * (li.length) +‘px‘; } //go Slider.prototype.goSlider = function() { var num = 0; var self = this; var ul = this.ul; var li = this.li; var wWidth = this.windowWidth; //开始 var sliderStart = function(event) { //最开始的位置 self.startX = event.touches[0].pageX; } //移动 var sliderMove = function(event) { //如果是单个手指的话才执行 if (event.targetTouches.length == 1) { //阻止事件默认行为 event.preventDefault(); self.offsetX = event.targetTouches[0].pageX - self.startX; } } //结束 var sliderEnd = function() { // event.preventDefault(); var windowWidth = window.innerWidth; //切换判断 if ( self.offsetX < 0 ) { if (num < li.length -1 ){ num++; }else{ num = li.length-1; } ul.style.webkitTransform = ‘translate3d(-‘+ wWidth * num +‘px,0,0)‘; }else{ if ( num > 0 ){ num--; }else{ num = 0; } ul.style.webkitTransform = ‘translate3d(-‘+ wWidth * num +‘px,0,0)‘; } } //监听touchstart,touchmove,touchend box.addEventListener(‘touchstart‘,sliderStart); box.addEventListener(‘touchmove‘,sliderMove); box.addEventListener(‘touchend‘,sliderEnd); } new Slider({ box:document.getElementById(‘box‘) });</script> </body></html>
手机网页轮播切换，简易版
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。