涉及JS框架:zepto;相当于移动端的jq 移动端事件: touchstart:手按下去时 touchmove:开始滑动 touchend:滑动结束时 js==jq; zepto===jq;onclick 移动端会有200-300ms的延时 touch模块;---移动端的事件 tap 点击事件 swipeLeft: 向左滑动 swipeRight:向右滑动 swipeUp: 向上滑动 swipeDown: 向下滑动
<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--//出现问题:轮播做好后,在最后一张切换到第一张时,出现延时.解决方法:--> <meta name="viewport"content="width=device-width,initial-scale=1.0"> <style> *{margin: 0;padding: 0} li{list-style: none} a{text-decoration: none} body,html{width: 100%;height: 100%;overflow: hidden} .banner,.pic{width: 100%;height:200px;overflow: hidden;position: relative;} .banner .pic ul{width:1000%;} .banner .pic ul li{width: 10%;height: 200px;float: left;} .banner .pic ul li:nth-of-type(1){background: rgba(22,255,255,0.5);} .banner .pic ul li:nth-of-type(2){background: rgba(225,65,25,0.5);} .banner .pic ul li:nth-of-type(3){background: rgba(225,55,255,0.5);} .banner .pic ul li:nth-of-type(4){background: rgba(0,255,55,0.5);} .banner .pic ul li:nth-of-type(5){background: rgba(225,255,25,0.5);} .banner .pic ul li:nth-of-type(6){background: rgba(22,255,255,0.5);} .banner .pic ul li:nth-of-type(7){background: rgba(181, 255, 47, 0.5);} .banner .pic ul li:nth-of-type(8){background: rgba(22,255,255,0.5);} .banner .pic ul li:nth-of-type(9){background: rgba(22,255,255,0.5);} .banner .pic ul li:nth-of-type(10){background: rgba(255, 46, 67, 0.5);} .nav{position: absolute;right:50px;bottom: 20px; } .banner .nav li{float: left;background: rgba(252,25,255,0.1);width: 10px;height: 10px;border-radius: 50%;margin-right: 10px;} .banner .nav .active{background: rgba(252,25,255,1)} </style> <script src="js/zepto.js"></script> <script src="js/touch.js"></script> <script src="js/fx.js"></script> <script> $(function () { var moveUi=$(".ban") var index=0 var vW=$('body').width(); var aLi=$(".nav li") var timer=null //封装一个UL的移动; function moveUIRUN() { moveUi.animate({'transform':'translate('+index*vW*-1+'px)'}); if(index>=9){ index=0; moveUi.css({'transform':'translate('+index*vW*-1+'px)'}); }else if(index<=0) { index=9; moveUi.css({'transform':'translate('+index*vW*-1+'px)'}); } //设置nav标注高亮 aLi.removeClass('active').eq(index).addClass('active'); if(timer==undefined){ timer=setInterval(function () { index++; moveUIRUN() },3000) } } //自动轮播 timer=setInterval(function () { index++; moveUIRUN() },3000) //滑屏切换图片 moveUi.swipeLeft(function () { //先清除定时器 clearInterval(timer) timer=undefined; index++; moveUIRUN(); }) moveUi.swipeRight(function () { //先清除定时器 clearInterval(timer) timer=undefined; index--; moveUIRUN(); }) }) </script> </head> <body> <div class="banner"> <div class="pic"> <ul class="ban"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> </div> <div class="nav"> <ul> <li class="active"></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </div> </body> </html>