HTML中 鼠标从左向右滑图片也从左向右滑动

在HTML中，要实现鼠标从左到右滑动图片跟随效果，通常会结合CSS和JavaScript或者HTML5的一些新特性，如触摸事件。这里有一个简单的示例：

1. **HTML结构**:

<div class="slider-container">
   <img src="your-image-source.jpg" class="sliding-image">
</div>

这里的`sliding-image`需要CSS来控制其位置。

2. **CSS样式**:

.slider-container {
   position: relative;
   overflow-x: hidden;
   white-space: nowrap;
}

.sliding-image {
   display: inline-block;
   transition: transform 0.5s ease;
}

`overflow-x: hidden`隐藏水平溢出内容，`white-space: nowrap`让文本不换行。

3. **JavaScript/jQuery 实现** (假设jQuery库已引入):

$(document).ready(function() {
   $('.slider-container').on('mousewheel DOMMouseScroll', function(event) {
       var delta = event.originalEvent.wheelDelta || -event.originalEvent.detail;
       if (delta > 0) { // 左滑
           $('.sliding-image').css('transform', 'translateX(-=5px)');
       } else if (delta < 0) { // 右滑
           $('.sliding-image').css('transform', 'translateX(+=5px)');
       }
       event.preventDefault(); // 阻止默认滚动行为
   });
});

这只是一个基础的示例，实际项目可能还需要考虑性能优化、移动端适配以及触控设备的支持。如果你想要更复杂的交互，可以考虑使用专门的UI库，如Swiper.js等。