滑动图片的实现方式 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来实现图品切换的方法。

 

转载于:https://www.cnblogs.com/jiaojiaome/p/3487188.html