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

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

工作代码段：

＆＃13;

<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>

＆＃13;

Answer 2

您可以使用Mouse Wheel，一个jQuery插件来实现水平滚动。 Mouse Wheel提供了两个名为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

鼠标滚轮上的水平滚动

2 个答案: