【常见】移动端实例——图片无缝滚动

2018-10-19 06:13:47来源：博客园阅读 ()

效果预览：http://www.csmlody.com/fxyg/mobile_lun/

轮播原理（电脑端轮播同理）：

<!doctype html>

　　<title>Document</title>
　　<script type="text/javascript">
　　//获取html
　　var html = document.documentElement;
　　//设置html的字体大小 = 可视区的宽度 / 15
　　html.style.fontSize = html.clientWidth / 15 + 'px';
　　//阻止pc和浏览器默认行为。
　　document.addEventListener('touchstart',function(ev){
　　　　ev.preventDefault();
　　});
　　</script>
<style>

/*html与css部分*/

body{
　　margin: 0;
}
.wrap{
　　height: 4.68rem;

　　 overflow:hidden;
　　position: relative;
}/*包裹ul的大容器*/
.list{
　　padding: 0;
　　margin: 0;
　　width:400%;
　　position: absolute;
　　top:0;
　　left:0;
　　list-style: none;
}/*ul一定要有定位，这样才能通过left值的改变实现轮播效果*/
.list li{
　　float: left;
　　width:15rem;
}
.list img{
　　width:15rem;
　　display: block;
}
nav{
　　width:15rem;
　　height: 10px;
　　position: absolute;
　　bottom:5px;
　　z-index: 1;
　　text-align:center;
}
nav a{
　　width:15px;
　　height: 15px;
　　display: inline-block;
　　background: red;
　　border-radius:50%;
　　vertical-align:top;
}
nav a.active{
　　background:#fff;
}
</style>
</head>
<body>
　<section class="wrap">
　　<ul class="list">
　　　<li>
　　　　　<img src="img/img.jpg" alt="" />
　　　</li>
　　　<li>
　　　　　<img src="img/img2.jpg" alt="" />
　　　</li>
　　　<li>
　　　　　<img src="img/img3.jpg" alt="" />
　　　</li>
　　　<li>
　　　　　<img src="img/img4.jpg" alt="" />
　　　</li>
　　</ul>
　　<nav>
　　　<a href="javascript:;" class="active"></a>
　　　<a href="javascript:;"></a>
　　　<a href="javascript:;"></a>
　　　<a href="javascript:;"></a>
　　</nav>
　</section>
<script type="text/javascript">
　var wrap=document.getElementsByClassName("wrap")[0],//获得包裹ul的外框
　　list=document.getElementsByClassName("list")[0],//获得ul
　　disX=0,//手指的初始位置
　　listL=0,//ul的初始left值
　　n=0,//用来清空按钮active状态的
　　w=wrap.clientWidth,//获取一张图片的宽度
　　s=0,//定时器用来计算第几张的
　　timer=0;//停止定时器用的
　　a=document.getElementsByTagName("a");//获取所有的小点点

　　list.addEventListener("touchstart",start);//给list绑定touchstart事件
　　list.addEventListener("touchmove",move);//给list绑定touchmove事件
　　list.addEventListener("touchend",end);//给list绑定touchend事件

　　list.innerHTML+=list.innerHTML;//为了实现轮播效果需要将所有的图片复制一份
　　len=list.children.length;//获取复制之后所有的图片的张数
　　list.style.width=w*len+"px"; //改变ul的宽度，使得它能放下所有的图片

　　function start(ev){ //start事件函数
　　　　clearInterval(timer);//清空定时器
　　　　var e=ev.changedTouches[0];//获取手指
　　　　disX=e.pageX;//获取手指所在的初始位置
　　　　list.style.transition="none";//清空transition
　　　　var num=Math.round(list.offsetLeft/w);//获取现在是第几张了，这是通过四舍五入的方法做的（list的left值/一张的宽度）
　　　　if(num==0){
　　　　　　num=a.length;
　　　　　　list.style.left=-num*w+"px";
　　　　}//如果是第一张，就变成第5张。。。第五张的下标是4，num是从0开始计数的
　　　　if(-num==len-1){
　　　　　　num=a.length-1;
　　　　　　list.style.left=-num*w+"px";
　　　　}//如果是最后一张，就变成第4张，第四张的下标是3

　　　　listL=this.offsetLeft;//将初始的listL改变一下
　　}

　　function move(ev){

　　　　　 ev.preventDefault();
　　　　var e=ev.changedTouches[0];//获取手指
　　　　list.style.left=(e.pageX-disX)+listL+"px";//ul的left值=（手指之后移动的位置-手指原始的位置）+list原来的left值
　　}

　　function end(){
　　　　var num=Math.round(list.offsetLeft/w);//计算现在第几张了，如果是第一张，没有过半，应该依旧会回去，过半了就是下一张了
　　　　list.style.transition="0.5s";//添加transition效果
　　　　list.style.left=num*w+"px"; //实现未过半回去的效果

　　　　　　　　
　　　　a[n].className="";
　　　　a[(-num)%a.length].className="active";
　　　　n=(-num)%a.length; //改变小点点的激活状态。为什么要用%a.length呢？因为（-num）会大于3，通过%4那么余数只会是0,1,2,3

　　　　timer=setInterval(function(){
　　　　　　inn();
　　　　},1000)//恢复定时器
　　　　s=-num;//将定时器里的s计数跟num相关联，因为num是负数,所以s是等于-num
　　}

　　timer=setInterval(function(){
　　　　inn();
　　},1000) //通过定时器实现自动播放

　　function inn(){
　　　　s++;//s自动++
　　　　list.style.left=-s*w+"px";
　　　　list.style.transition="0.5s";
　　　　if(s>len-1){ //如果s>len-1了就让s变成第4张，s是下标，所以是3。便且清空transition，防止变换过程被直播。在s++,或是s--的时候，最好使用>或<号，这样不容易出错。
　　　　　　s=a.length-1;
　　　　　　list.style.transition="none";
　　　　　　list.style.left=-s*w+"px";
　　　　　　setTimeout(function(){
　　　　　　　　list.style.transition="0.5s";
　　　　　　　　s++;
　　　　　　　　list.style.left=-s*w+"px";//当变换过程结束后，再把transition加回来，同时播放下一张
　　　　　　　　a[n].className="";
　　　　　　　　a[s%a.length].className="active";
　　　　　　　　n=s%a.length;
　　　　　　},30)
　　　}
　　　a[n].className="";
　　　a[s%a.length].className="active";
　　　n=s%a.length;
　　}
</script>
</body>
</html>