js点击滑动切换背景

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background Switcher</title>
<style>
  body {
    transition: background-color 0.5s;
  }
</style>
</head>
<body>
<button onclick="changeBackground('red')">Red</button>
<button onclick="changeBackground('blue')">Blue</button>
<button onclick="changeBackground('green')">Green</button>

<script>
function changeBackground(color) {
  document.body.style.backgroundColor = color;
}
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Swipe Background Switcher</title>
<style>
  body {
    transition: background-color 0.5s;
  }
</style>
<script src="https://hammerjs.github.io/dist/hammer.min.js"></script>
</head>
<body>
<div id="swipeArea" style="width: 100%; height: 100vh;"></div>

<script>
var colors = ['red', 'blue', 'green'];
var currentColorIndex = 0;

var swipeArea = document.getElementById('swipeArea');
var hammer = new Hammer(swipeArea);

hammer.on('swipeleft', function() {
  currentColorIndex = (currentColorIndex + 1) % colors.length;
  changeBackground(colors[currentColorIndex]);
});

hammer.on('swiperight', function() {
  currentColorIndex = (currentColorIndex - 1 + colors.length) % colors.length;
  changeBackground(colors[currentColorIndex]);
});

function changeBackground(color) {
  document.body.style.backgroundColor = color;
}
</script>
</body>
</html>