在js中如何實現圖片左右滑動

這篇文章主要為大家詳細介紹了js實現手機web圖片左右滑動效果，具有一定的參考價值，有興趣的小夥伴們可以參考一下

最近在做一個手機端web站點，裡面有一個圖片展示效果：

1、點擊任何圖片時圖片全螢幕展示，左右滑動能展示其他的圖片。
2、滑動超過一定範圍自動滑到下一張圖片，不超過則回退到目前照片位置。此處的滑動要帶動畫效果

實作：

每張圖片外面一個p，將其寬度設定為100%，最外層有一個p[命名為outerp]，其寬度設為：總圖片數量*100 '%'。給最外層p設定touchstart,touchmove,touchend事件監聽處理函數，在touchmove中根據移動的x軸距離動態改變outerp的x軸距離即可實現圖片滑動效果，在touchend中根據當前滑動的距離判斷滑動到下一張還是回退目前圖片位置。

之前我們可以透過設定outerp的position屬性，然後改變left值實現移動效果，這裡我用的是css3的動畫函數transform，簡單,且可以實現動畫效果

transform參數：

-webkit-transform:translate(100px,200px) tr //可以设置x、y轴方向移动距离
-webkit-transform:translateX(100px) translateY(200px) translateZ(3000px) 

//可以设置x、y、z轴方向移动距离.3D效果
-webkit-transition:.4s ease;//设置动画时间

定義動畫時間：

.transition {
  -webkit-transition:.4s ease;
  -moz-transition:.4s ease;
  -ms-transition:.4s ease;
  -o-transition: .4s ease;
  transition:.4s ease;
}

關鍵程式碼：

var touchOption={touchStartX:0,startTranslateX:0,moveDistance:0};

1、touchstart

outerp.addEventListener('touchstart',function(){
$(this).removeClass('transition');//移除动画效果，否则移动时图片会颤动
touchOption.touchStartX = e.touches[0].clientX;
        if ($(this).css("-webkit-transform") == 'none') {
          touchOption.startTranslateX = 0;
        }
        else {
          //css-webkit-transform属性值格式：matrix(1, 0, 0, 1, -4140, 0)
          var transfrom_info = $('.sourcePhotop').css("-webkit-transform").split(',')[4];//获取当前outerp的x轴坐标
          touchOption.startTranslateX = parseInt(transfrom_info);
        }
},false);

2、touchmove

outerp.addEventListener('touchmove',function(){
       touchOption.moveDistance = (e.touches[0].clientX - touchOption.touchStartX);
        var TranslateX = touchOption.startTranslateX + touchOption.moveDistance;
        $(this).css('-webkit-transform', 'translateX('+ TranslateX +'px) translateZ(0)'); //移动图片
},false);

3 、touchend

outerp.addEventListener('touchend',function(){
      $(this).addClass('transition);//添加动画效果
       var moveX=100;//此处计算移动移动下一张图片还是退货当前图片代码省略       
        $(this).css('-webkit-transform', 'translateX('+ moveX +'px) translateZ(0)'); //移动图片
},false);

總結：

1、outerp的動畫參數和效果都是js動態加入的，不需要事先定義
2、用translate( x,y)這種參數時，圖片移動時會顫動
3、用translateX() 且帶translateZ(0)時圖片移動正常，不帶translateZ(0)同樣出現顫動
4、如果用的是translateX(moveX) ranslateZ(0)這種格式，如果moveX用的是百分比值,如'50%'，在android手機自動瀏覽器和uc瀏覽器中則沒有動畫效果，用px單位值則正常

為防止圖片移動過程顫動和保證動畫效果，建議大家用translateX(100px) ranslateZ(0)這種參數，且移動距離用px值

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

詳細解讀layui父子視窗如何傳遞參數

#在微信小程式中如何實作image元件圖片自適應顯示

在VUE移動音樂WEBAPP中有關跨域請求失敗方面的問題

以上是在js中如何實現圖片左右滑動的詳細內容。更多資訊請關注PHP中文網其他相關文章！