zoukankan      html  css  js  c++  java
  • 滑动图片的实现方式 2013-12-23

    研究了一上午的图片滑动事件,有点小成。

    css代码是这样的:

    <ul class="ul-images" id="ulImages">
                       <li  style="display:block;">
                            <img src="images/home/1.jpg" />
                            <p class="flex-caption">Swipe this picture, left or right!</p>
                        </li>
                        <li style="display:none;">
                            <img src="images/home/2.jpg" />
                            <p class="flex-caption">Come on! Swipe the picture!</p>
                        </li>
                        <li  style="display:none;">
                            <img src="images/home/3.jpg" />
                            <p class="flex-caption">Really! Please swipe the picture</p>
                        </li>
                        <li  style="display:none;">
                            <img src="images/home/4.jpg" />
                            <p class="flex-caption">Well? Are you gonna swipe?!</p>
                        </li>
                  </ul>

    然后要实现图片的轮流切换,在网上找了一下,

      //左右滑动图片的事件。
        var startX, startY, endX, endY;
         document.getElementById("ulImages").addEventListener("touchstart", touchStart, false);
         document.getElementById("ulImages").addEventListener("touchmove", touchMove, false);
         document.getElementById("ulImages").addEventListener("touchend", touchEnd, false);
           function touchStart(event) {
        event.preventDefault();
                    var touch = event.touches[0];
                     startY = touch.pageY;
                    startX = touch.pageX;
                }
                 function touchMove(event) { 

                    var touch = event.touches[0];
                      endX = touch.pageX;
              }
                function touchEnd(event) { event.preventDefault();
        var index=$("#ulImages>li").index($("#ulImages>li:visible"));
                  //$("#ulImages>li").eq(index).hide();
          if ((startX - endX) < 5) {//右滑动
          //alert("左滑动");alert("开始"+startX);
              if(index>0){$("#ulImages>li").eq(index).hide();index--;}
                    // alert("结束"+endX);
                   }else if((endX - startX) < 5){//左滑动
          // alert("右滑动");alert("开始"+startX);
           if(index<$("#ulImages>li").length-1){$("#ulImages>li").eq(index).hide();index++;}
         //  alert("结束"+endX);
           }
                   $("#ulImages>li").eq(index).show();
                
                }

     这样做出来的效果很生涩,切换不灵活,只需要阻止浏览器的默认行为即可.在各个事件的开始加上event.preventDefault()即可。但是这个时候我发现网右边滑动时,endX-startX>0,反之往左边滑动时startx-startY>0.很纠结这个。不过还好问题解决了。。。。哦行

    正确的如下:

      //左右滑动图片的事件。
        var startX, startY, endX, endY;
         document.getElementById("ulImages").addEventListener("touchstart", touchStart, false);
         document.getElementById("ulImages").addEventListener("touchmove", touchMove, false);
         document.getElementById("ulImages").addEventListener("touchend", touchEnd, false);
           function touchStart(event) {
        event.preventDefault();
                    var touch = event.touches[0];
                     startY = touch.pageY;
                    startX = touch.pageX;
                }
                 function touchMove(event) { event.preventDefault();
                    var touch = event.touches[0];
                     //endY = (startY - touch.pageY);
                   endX = touch.pageX;
              }
                function touchEnd(event) { event.preventDefault();
        var index=$("#ulImages>li").index($("#ulImages>li:visible"));
                  //$("#ulImages>li").eq(index).hide();
          if ((startX - endX) > 5) {//右滑动
          //alert("左滑动");alert("开始"+startX);
              if(index>0){$("#ulImages>li").eq(index).hide();index--;}
                    // alert("结束"+endX);
                   }else if((endX - startX) > 5){//左滑动
          // alert("右滑动");alert("开始"+startX);
           if(index<$("#ulImages>li").length-1){$("#ulImages>li").eq(index).hide();index++;}
         //  alert("结束"+endX);
           }
                   $("#ulImages>li").eq(index).show();
                
                }
     })

    接着我还会找一下通过position来实现图品切换的方法。

    人生短短几十年,要在有限的生命里多做店有意义的事情。莫要让自己迎合别人的眼光活着。随心而为,听从心的声音。讨好自己,悠哉悠哉!
  • 相关阅读:
    MYSQL EXPLAIN 执行计划详解
    MAC idea 快捷键
    mysql decimal类型与decimal长度用法详解
    docker zookeeper 集群搭建
    docker redis4.0 集群(cluster)搭建
    SSH登录问题 .ssh/known_hosts和 ECDSA key
    docker常用命令
    Linux 软件安装到 /usr,/usr/local/ 还是 /opt 目录?
    IoC基础篇(一)--- Spring容器中Bean的生命周期
    Maven实战(六)--- dependencies与dependencyManagement的区别
  • 原文地址:https://www.cnblogs.com/jiaojiaome/p/3487188.html
Copyright © 2011-2022 走看看