Question

我想在ASP.net中使用滚动条显示缩略图。这是我的代码示例。

      <h2 id="example">Example</h2>
<p>Click in the image and see the <strong>jQuery lightBox plugin</strong> in action.</p>
<div id="gallery">
    <ul>
        <li>
            <a href="photos/image1.jpg" rel="lightbox" title="Media Monitors All Pakistan Newspapers Web Hub!">
                <img src="photos/thumb_image1.jpg" width="72" height="72" alt="" />
            </a>
        </li>
        <li>
            <a href="photos/image2.jpg" rel="lightbox" title="Media Monitors All Pakistan Newspapers Web Hub!">
                <img src="photos/thumb_image2.jpg" width="72" height="72" alt="" />
            </a>
        </li>
        <li>
            <a href="photos/image3.jpg" rel="lightbox" title="Media Monitors All Pakistan Newspapers Web Hub!">
                <img src="photos/thumb_image3.jpg" width="72" height="72" alt="" />
            </a>
        </li>
        <li>
            <a href="photos/image4.jpg" rel="lightbox" title="Media Monitors All Pakistan Newspapers Web Hub!">
                <img src="photos/thumb_image4.jpg" width="72" height="72" alt="" />
            </a>
        </li>
        <li>
            <a href="photos/image5.jpg" rel="lightbox" title="Media Monitors All Pakistan Newspapers Web Hub!">
                <img src="photos/thumb_image5.jpg" width="72" height="72" alt="" />
            </a>
        </li>
        <li>
            <a href="photos/image6.jpg" rel="lightbox" title="Media Monitors All Pakistan Newspapers Web Hub!">
                <img src="photos/thumb_image6.jpg" width="72" height="72" alt="" />
            </a>
        </li>
        <li>
            <a href="photos/image7.jpg" rel="lightbox" title="Media Monitors All Pakistan Newspapers Web Hub!">
                <img src="photos/thumb_image7.jpg" width="72" height="72" alt="" />
            </a>
        </li>
        <li>
            <a href="photos/image8.jpg" rel="lightbox" title="Media Monitors All Pakistan Newspapers Web Hub!">
                <img src="photos/thumb_image8.jpg" width="72" height="72" alt="" />
            </a>
        </li>
        <li>
            <a href="photos/image9.jpg" rel="lightbox" title="Media Monitors All Pakistan Newspapers Web Hub!">
                <img src="photos/thumb_image9.jpg" width="72" height="72" alt="" />
            </a>
        </li>
        <li>
            <a href="photos/image10.jpg" rel="lightbox" title="Media Monitors All Pakistan Newspapers Web Hub!">
                <img src="photos/thumb_image10.jpg" width="72" height="72" alt="" />
            </a>
        </li>
        <li>
            <a href="photos/image11.jpg" rel="lightbox" title="Media Monitors All Pakistan Newspapers Web Hub!">
                <img src="photos/thumb_image11.jpg" width="72" height="72" alt="" />
            </a>
        </li>
        <li>
            <a href="photos/image12.jpg" rel="lightbox" title="Media Monitors All Pakistan Newspapers Web Hub!">
                <img src="photos/thumb_image12.jpg" width="72" height="72" alt="" />
            </a>
        </li>
    </ul>
</div>

这是现在显示的图像 enter image description here

但是我想要图像的水平滚动条（移动左写）如何在缩略图显示中实现滚动条？任何想法？

Answer 1

您的意思是想要为#gallery设置水平滚动条吗？如果是这种情况，则应设置#gallery的宽度并将其设置为overflow:auto;。您应该将ul设置为宽于#gallery（以允许滚动）。

它看起来像这样：

#gallery {
    width:300px;
    overflow:auto;
}

ul { 
    width:600px;
}

JSFiddle粗略示例：http://jsfiddle.net/MHG4c/

这很粗糙，但基本的想法就是这样。

滚动条在jQuery LightBox中

1 个答案: