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

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

新老客户大回馈,云服务器低至5折

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

轮播原理(电脑端轮播同理):

<!doctype html>

<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,user-scalable=no">

  <meta name="x5-orientation" content="portrait"/>
  <meta name="screen-orientation" content="portrait">

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

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:手淘H5移动端适配方案flexible源码分析

下一篇:JSON 与 JS 对象的关系