How to slide pictures left and right in js

This article mainly introduces in detail the js implementation of the left and right sliding effect of mobile web pictures. It has a certain reference value. Interested friends can refer to it.

I am currently working on a mobile web site. , there is a picture display effect in it:

1. When you click on any picture, the picture will be displayed in full screen. Swipe left and right to display other pictures.
2. If the slide exceeds a certain range, it will automatically slide to the next picture. If the slide does not exceed a certain range, it will return to the current photo position. The sliding effect here needs to be animated

Implementation:

There is a p outside each picture, set its width to 100%, and there is a p[ on the outermost layer Named outerp], and its width is set to: total number of pictures * 100 '%'. Set the touchstart, touchmove, and touchend event listening processing functions for the outermost p. In touchmove, dynamically change the x-axis distance of outerp according to the moving x-axis distance to achieve the picture sliding effect. In touchend, determine the sliding distance based on the current sliding distance. The next picture still returns to the current picture position.

Before we could set the position attribute of outerp and then change the left value to achieve the movement effect. Here I use the CSS3 animation function transform, which is simple and can achieve animation effects

transform parameter :

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

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

Define animation time:

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

Key code:

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

Summary:

1. The animation parameters and effects of outerp are dynamically added by js and do not need to be defined in advance.
2. Use translate( When using parameters such as The format is translateX(moveX) ranslateZ(0). If moveX uses a percentage value, such as '50%', there will be no animation effect in the android mobile phone automatic browser and uc browser, and it will be normal if the px unit value is used.

In order to prevent the image from shaking during movement and ensure the animation effect, it is recommended that you use parameters such as translateX(100px) ranslateZ(0), and use the px value for the moving distance

The above is what I compiled for you Yes, I hope it will be helpful to everyone in the future.

Related articles:

The above is the detailed content of How to slide pictures left and right in js. For more information, please follow other related articles on the PHP Chinese website!