<!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>