Home > Article > Web Front-end > How to use JavaScript to achieve the left and right drag switching effect of images?

How to use JavaScript to achieve the left and right drag switching effect of images?

王林Original: 2023-10-21 09:27:281440browse

JavaScript 如何实现图片的左右拖动切换效果？

JavaScript How to achieve the left and right drag switching effect of images?

In modern web design, dynamic effects can increase user experience and visual appeal. The left and right drag switching effect of pictures is a common dynamic effect, which allows users to switch different content by dragging pictures. In this article, we will introduce how to use JavaScript to achieve this image switching effect and provide specific code examples.

First, we need to prepare some HTML and CSS code to create a container containing multiple images and set styles to enable horizontal dragging. The following is a simple sample code:

<!DOCTYPE html>
<html>
<head>
  <style>
    .image-container {
      width: 800px;
      overflow: hidden;
      white-space: nowrap;
    }
    .image-container img {
      display: inline-block;
      width: 600px;
      height: 400px;
    }
  </style>
</head>
<body>
  <div class="image-container">
    <img src="image1.jpg">
    <img src="image2.jpg">
    <img src="image3.jpg">
  </div>

  <script src="script.js"></script>
</body>
</html>

In the above code, we created a div element named image-container as the image container and set the corresponding style. Inside the div element, we placed three img elements, representing three pictures respectively.

Next, we need to write code in the JavaScript file to enable the image to switch based on the user's dragging. The following is a sample code:

// 获取图片容器元素
var container = document.querySelector('.image-container');

// 初始化变量
var startX = 0; // 初始鼠标位置
var scrollLeft = 0; // 初始滚动位置

// 鼠标按下事件
container.addEventListener('mousedown', function(e) {
  startX = e.pageX - container.offsetLeft; // 计算鼠标初始位置相对于图片容器的偏移量
  scrollLeft = container.scrollLeft; // 获取当前滚动位置
  container.classList.add('active'); // 添加active类，用于改变样式
});

// 鼠标移动事件
container.addEventListener('mousemove', function(e) {
  if (!container.classList.contains('active')) return; // 如果没有被激活，直接返回
  e.preventDefault(); // 阻止默认滚动行为
  var x = e.pageX - container.offsetLeft; // 计算当前鼠标位置相对于图片容器的偏移量
  var walk = (x - startX) * 2; // 计算鼠标移动的距离，并乘以一个因子，以便图片移动更快
  container.scrollLeft = scrollLeft - walk; // 根据鼠标移动距离来改变滚动位置
});

// 鼠标释放事件
container.addEventListener('mouseup', function() {
  container.classList.remove('active'); // 移除active类
});

In the above code, we first obtain the image container element through the document.querySelector method, and initialize several variables to save some initial values. Then, we added event listeners for the mousedown, mousemove, and mouseup events of the image container.

In the mousedown event handler, we obtain the offset of the initial mouse position and save the current scroll position. At the same time, we added a class named active to the image container to change the style of the container.

In the mousemove event handler, we first determine whether the image container is activated. If it is not active, return directly. Next, we prevent the default scrolling behavior and calculate the offset of the current mouse position relative to the image container. Then, the scroll position is changed according to the movement distance of the mouse to achieve the left and right drag switching effect of the picture.

Finally, in the mouseup event handler, we remove the container's active class to restore the style.

Through the above code, we can achieve the left and right drag switching effect of the image. Users can switch and browse pictures by dragging the mouse.

The above is how JavaScript implements the left and right drag switching effect of images. By properly writing JavaScript code and combining HTML and CSS, we can achieve various dynamic effects and add more interaction and attraction to the web page. Hope this article is helpful to you!

The above is the detailed content of How to use JavaScript to achieve the left and right drag switching effect of images?. For more information, please follow other related articles on the PHP Chinese website!

JavaScript css html 事件

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to use JavaScript to achieve a web page typewriter effect?Next article：How to use JavaScript to achieve a web page typewriter effect?

See more

How to use JavaScript to achieve the left and right drag switching effect of images?

Related articles