如何创建一个Tiny水平滚动条来逐个显示图像？

我使用Tiny Scrollbar Plugin来制作一个小型的水平滚动条，通过Media Queries的帮助，在缩小的768像素的窗口大小中显示一个div内的一串图像。当我运行上面的代码并将窗口大小缩小到768像素时，我的图像显示在一行中，但不幸的是我没有得到任何水平滚动条来滚动图像。我不知道我在做错什么。谁能告诉如何得到一个小水平滚动条如何创建一个Tiny水平滚动条来逐个显示图像？

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <script src="Scripts/jquery-2.0.3.min.js" type="text/javascript"></script> 
    <script src="Scripts/jquery-ui-1.10.3.min.js" type="text/javascript"></script> 
    <script src="Scripts/jquery.tinyscrollbar.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $('#scrollbar1').tinyscrollbar({ axis: 'y' }); 
     }); 
    </script> 
    <style> 
     .overview 
     { 
      white-space: nowrap; 
     } 
     #scrollbar1 
     { 
      width: 100%; 
      margin: 20px 0 10px; 
     } 
     #scrollbar1 .viewport 
     { 
      width: 100%; 
      height: 200px; 
      overflow: hidden; 
      position: relative; 
     } 
     #scrollbar1 .overview 
     { 
      list-style: none; 
      position: absolute; 
      left: 0; 
      top: 0; 
      padding: 0; 
      margin: 0; 
      width: 100%; 
     } 
     #scrollbar1 .scrollbar 
     { 
      position: relative; 
      background-position: 0 0; 
      float: right; 
      width: 15px; 
     } 
     #scrollbar1 .track 
     { 
      background: height: 100%; 
      width: 15px; 
      position: relative; 
     } 
     #scrollbar1 .thumb 
     { 
      background-color: #e0d8b8; 
      border-radius: 4px; 
      height: 20px; 
      width: 8px; 
      cursor: pointer; 
      overflow: hidden; 
      position: absolute; 
      top: 0; 
      left: -5px; 
     } 
     #scrollbar1 .thumb .end 
     { 
      background-color: #e0d8b8; 
      border-radius: 4px; 
      overflow: hidden; 
      height: 20px; 
      width: 8px; 
     } 
     #scrollbar1 .disable 
     { 
      display: none; 
     } 


     @media screen and (max-width: 768px) 
     { 
      .overview 
      { 
       white-space: nowrap; 
       display: inline; 
      } 
     } 

    </style> 
</head> 
<body>  
    <div id="scrollbar1"> 
     <div class="scrollbar"> 
      <div class="track"> 
       <div class="thumb"> 
        <div class="end"> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="viewport"> 
      <div class="overview"> 
       <img src="Comic.jpg" alt="" /> 
       <img src="Comic.jpg" alt="" /> 
       <img src="Comic.jpg" alt="" /> 
       <img src="Comic.jpg" alt="" /> 
       <img src="Comic.jpg" alt="" /> 
       <img src="Comic.jpg" alt="" /> 
       <img src="Comic.jpg" alt="" /> 
       <img src="Comic.jpg" alt="" /> 
       <img src="Comic.jpg" alt="" /> 
       <img src="Comic.jpg" alt="" /> 
       <img src="Comic.jpg" alt="" /> 
       <img src="Comic.jpg" alt="" /> 
       <img src="Comic.jpg" alt="" /> 
       <img src="Comic.jpg" alt="" /> 
       <img src="Comic.jpg" alt="" /> 
       <img src="Comic.jpg" alt="" /> 
       <img src="Comic.jpg" alt="" /> 
       <img src="Comic.jpg" alt="" /> 
      </div> 
     </div> 
    </div>  
</body> 
</html>

来源

2013-12-13 Jagan Mohan

我会建议切换到bxslider，如果你不介意。

Here是一个简单的例子。（忽略图像周围的白色边框）。你应该看看选项页面，这个滑块是高度可配置的。

你唯一的缺点是缺少水平滚动条。但滑块是充分响应，所以没有必要写媒体查询等

但是，备份到你的代码，尝试重新加载tinyscrollbar的窗口大小调整。如果宽度因媒体查询而发生变化，则这是必须的。

$(window).resize(function() { 
    // reload your tinnyscrollbar again 
});

来源

2014-02-01 21:44:28

如何创建一个Tiny水平滚动条来逐个显示图像？

回答

相关问题