0

我想在 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>

这是现在显示的图像 在此处输入图像描述

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

4

1 回答 1

0

你的意思是你想要一个水平滚动条#gallery吗？如果是这种情况，那么您应该设置您的宽度#gallery并将其设置为overflow:auto;. 并且您应该将 设置为ul比#gallery（以允许它滚动）更宽。

它看起来像这样：

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

ul { 
    width:600px;
}

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

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

于 2012-10-18T10:11:20.553 回答