鼠标滚轮上的水平滚动

Question

我有一个包含带有水平滚动条的图像的单行表，我想使用鼠标滚轮水平滚动图像。 这是我的html。

<div class="container">
  <div class="image-gallery">
    <table>
      <tr>
        <td class="images">
          <div class="img"><img src="../Images/small_Image_1.jpg" /><div class="description"><a class="image-slider-studets-names" href=" ">Alia Bhatt</a></div> </div>
        </td>
        <td class="images">
          <div class="img"><img src="../Images/small_Image_2.jpg" /><div class="description"><a class="image-slider-studets-names" href="">sonia gandhi</a></div> </div>
        </td>
        <td class="images">
          <div class="img"><img src="../Images/small_Image_3.jpg" /><div class="description"><a class="image-slider-studets-names" href="">Barney Stinson</a></div> </div>
        </td>
        <td class="images">
          <div class="img"><img src="../Images/small_Image_4.jpg" /><div class="description"><a class="image-slider-studets-names" href="">Ranjit Choudary</a></div> </div>
        </td>
        <td class="images">
          <div class="img"><img src="../Images/small_Image_5.jpg" /><div class="description"><a class="image-slider-studets-names" href="">Gangadhar Shastri</a></div> </div>
        </td>
        <td class="images">
          <div class="img"><img src="../Images/small_Image_6.jpg" /><div class="description"><a class="image-slider-studets-names" href="">Mountain</a></div> </div>
        </td>
      </tr>
    </table>
  </div>
</div>

Answer 1

你可以使用Mouse Wheel，一个jQuery插件来实现水平滚动。 鼠标滚轮提供了两个帮助方法，称为 mousewheel 和 unmousewheel，它们的作用与 jQuery 中的其他事件帮助方法类似，您的代码应如下所示：

<div class="container">
 <div class="image-gallery">
     <table>
  <tr>
    <td class="images">
      <div class="img"><img src="../Images/small_Image_1.jpg" /><div class="description"><a class="image-slider-studets-names" href=" ">Alia Bhatt</a></div> </div>
    </td>
    <td class="images">
      <div class="img"><img src="../Images/small_Image_2.jpg" /><div class="description"><a class="image-slider-studets-names" href="">sonia gandhi</a></div> </div>
    </td>
    <td class="images">
      <div class="img"><img src="../Images/small_Image_3.jpg" /><div class="description"><a class="image-slider-studets-names" href="">Barney Stinson</a></div> </div>
    </td>
    <td class="images">
      <div class="img"><img src="../Images/small_Image_4.jpg" /><div class="description"><a class="image-slider-studets-names" href="">Ranjit Choudary</a></div> </div>
    </td>
    <td class="images">
      <div class="img"><img src="../Images/small_Image_5.jpg" /><div class="description"><a class="image-slider-studets-names" href="">Gangadhar Shastri</a></div> </div>
    </td>
    <td class="images">
      <div class="img"><img src="../Images/small_Image_6.jpg" /><div class="description"><a class="image-slider-studets-names" href="">Mountain</a></div> </div>
    </td>
  </tr>
</table>
    </div>
  </div>


<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
<script type='text/javascript' src='/js/jquery.mousewheel.min.js'></script>
<script>
$(document).ready(function(){
      $("body").mousewheel(function(event, delta) {

         //The "30" represents speed. preventDefault ensures the page won't scroll down.
         this.scrollLeft -= (delta * 30);
        event.preventDefault();

 });
});
</script>

这是一个DEMO Fiddle

Answer 2

不要使用<div> 来包装图像和描述，而是使用<span>，因为它默认对齐内联。

工作代码片段：

<div class="container">
  <div class="image-gallery">
    <table>
      <tr>
        <td class="images"><span class="img"><img src="../Images/small_Image_1.jpg" /><div class="description"><a class="image-slider-studets-names" href=" ">Alia Bhatt</a></div> </span></td>
        <td class="images"><span class="img"><img src="../Images/small_Image_2.jpg" /><div class="description"><a class="image-slider-studets-names" href="">sonia gandhi</a></div> </span></td>
        <td class="images"><span class="img"><img src="../Images/small_Image_3.jpg" /><div class="description"><a class="image-slider-studets-names" href="">Barney Stinson</a></div> </span></td>
        <td class="images"><span class="img"><img src="../Images/small_Image_4.jpg" /><div class="description"><a class="image-slider-studets-names" href="">Ranjit Choudary</a></div> </span></td>
        <td class="images"><span class="img"><img src="../Images/small_Image_5.jpg" /><div class="description"><a class="image-slider-studets-names" href="">Gangadhar Shastri</a></div> </span></td>
        <td class="images"><span class="img"><img src="../Images/small_Image_6.jpg" /><div class="description"><a class="image-slider-studets-names" href="">Mountain</a></div> </span></td>
        <!-- duplicating it/adding more to get the horizontal scrollbar -->
        <td class="images"><span class="img"><img src="../Images/small_Image_6.jpg" /><div class="description"><a class="image-slider-studets-names" href="">Mountain</a></div> </span></td>
        <td class="images"><span class="img"><img src="../Images/small_Image_6.jpg" /><div class="description"><a class="image-slider-studets-names" href="">Mountain</a></div> </span></td>
        <td class="images"><span class="img"><img src="../Images/small_Image_6.jpg" /><div class="description"><a class="image-slider-studets-names" href="">Mountain</a></div> </span></td>            
        <td class="images"><span class="img"><img src="../Images/small_Image_6.jpg" /><div class="description"><a class="image-slider-studets-names" href="">Mountain</a></div> </span></td>            
        <td class="images"><span class="img"><img src="../Images/small_Image_6.jpg" /><div class="description"><a class="image-slider-studets-names" href="">Mountain</a></div> </span></td>            
        <td class="images"><span class="img"><img src="../Images/small_Image_6.jpg" /><div class="description"><a class="image-slider-studets-names" href="">Mountain</a></div> </span></td>
      </tr>
    </table>
  </div>
</div>