js在滑动触摸结束后，左滑背景色周期变换红绿蓝红，右滑背景色周期变换红蓝绿红，上滑下滑不变色

以下是一个实现该功能的示例代码：

// 获取要滑动的元素
var element = document.getElementById('myElement');

// 记录触摸开始时的坐标
var startX, startY;

// 监听触摸开始事件
element.addEventListener('touchstart', function(event) {
  startX = event.touches[0].clientX;
  startY = event.touches[0].clientY;
});

// 监听触摸结束事件
element.addEventListener('touchend', function(event) {
  var endX = event.changedTouches[0].clientX;
  var endY = event.changedTouches[0].clientY;

  // 判断滑动方向
  var deltaX = endX - startX;
  var deltaY = endY - startY;
  if (Math.abs(deltaX) >= Math.abs(deltaY)) {
    if (deltaX > 0) {
      // 右滑，背景色周期变换红蓝绿红
      changeColor(['red', 'blue', 'green', 'red']);
    } else {
      // 左滑，背景色周期变换红绿蓝红
      changeColor(['red', 'green', 'blue', 'red']);
    }
  } else {
    // 上滑下滑不变色
    return;
  }
});

// 改变背景色函数
function changeColor(colors) {
  var index = 0;
  element.style.backgroundColor = colors[index];
  setInterval(function() {
    index = (index + 1) % colors.length;
    element.style.backgroundColor = colors[index];
  }, 1000);
}

该代码中，首先获取了要滑动的元素，并在触摸开始事件中记录了触摸开始时的坐标。在触摸结束事件中，根据触摸结束时的坐标计算出滑动的方向，并根据方向调用 `changeColor` 函数改变背景色。实现改变背景色的方法是使用了 `setInterval` 定时器，每隔一秒钟切换一次背景色。最后，如果是上滑或下滑，则不改变背景色。