html - 使用图像的 Html5 滚动条

Question

我将创建一个 HTML5 JavaScript 应用程序，其中我想要一个浮动滚动的图像。我想滚动 a、b、c 的图像，我只想通过鼠标拖动来做到这一点，并且不使用滚动条。任何人都可以阐明这一点吗？

Answer 1

  <link rel="stylesheet" type="text/css" href="jquery.horizontal.scroll.css" />
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
  <script src="jquery.horizontal.scroll.js" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function(){
       $('#horiz_container_outer').horizontalScroll();
    });
 </script>

  /* add the necessary HTML*/
 <ul id="horiz_container_outer">
     <li id="horiz_container_inner">
        <ul id="horiz_container">
          <li>Image 1</li>
          <li>Image 2</li>
          <li>Image 3</li>
          <li>Image 4</li>
          <li>Image 5</li>
       </ul>
    </li>    
</ul>        


  <div id="scrollbar">
       <a id="left_scroll" class="mouseover_left" href="#"></a>
       <div id="track">
       <div id="dragBar"></div>
  </div>
           <a id="right_scroll" class="mouseover_right" href="#"></a></div>
   </div>

您可以像这样使用..希望它对您的应用程序有所帮​​助

Answer 2

您可以使用一些插件来实现此功能。许多插件可用于滚动图像。

尝试这个：

http://www.htmldrive.net/items/show/1118/Awesome-jQuery-scrolling-decks-plugin