如何创建一个微小的水平滚动条来逐个显示内嵌图像?

时间:2013-12-13 07:10:05

标签: html css media-queries tinyscrollbar

我正在使用Tiny Scrollbar Plugin制作一个微小的水平滚动条,在Media Queries的帮助下,在一个非破坏单一的div中显示一堆图像,缩小的窗口大小为768像素。当我运行上面的代码并将窗口大小减小到768像素时,我将我的图像显示在一行中,但不幸的是我没有得到任何水平滚动条来滚动图像。我不知道我哪里做错了。任何人都可以告诉如何获得一个小的水平滚动条

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

1 个答案:

答案 0 :(得分:0)

如果您不介意,我建议您切换到bxslider。

Here就是一个简单的例子。 (忽略图像周围的白色边框)。您应该查看选项页面,此滑块是高度可配置的。

唯一的缺点是缺少水平滚动条。但是滑块是完全响应的,所以不需要编写媒体查询等。


但是,支持你的代码,尝试在窗口调整大小时重新加载tinyscrollbar。如果宽度因媒体查询而改变,则必须使用。

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