使用jQuery滑块实现CSS水平滚动溢出

Question

使用jQuery滑块实现CSS水平滚动溢出

jquerycssjquery-pluginsjavascripthorizontal-scrolling

3

我正在尝试设置全屏的jquery滑块。我将项目分成了两个步骤：1）CSS和2）JS。 1）CSS，下面是我想要实现的效果（没有固定高度），下面是我目前的代码，但它无法工作。

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <style type="text/css">

        /* Positioning */
        #container { width: 2500px; }
        .block { display: inline; }

        /* Styling */
        .block img { padding: 5px; }

    </style>
</head>
<body>
    <div id="container">
        <div class="block"><img src="http://i42.tinypic.com/1zp2poz.gif"></div>
        <div class="block"><img src="http://i42.tinypic.com/1zp2poz.gif"></div>
        <div class="block"><img src="http://i42.tinypic.com/1zp2poz.gif"></div>
    </div>
</body>
</html>

2) Javascript，使用jquery，我想让div在点击它们时向左滑动...就像jQuery Coda Slider一样。

谢谢，任何帮助都会受到赞赏。

- Jeffrey

链接已损坏，新链接很可能是这个：http://kevinbatdorf.github.io/codaslider/。 - Don Cullen

2个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- kilrizzy · Answer 1

你需要先设置容器 div 的 CSS，将其宽度固定并将溢出设置为隐藏，这样只有区域内的内容才会显示出来：

#container{
  width:500px;
  height:200px;
  overflow:hidden;
}

你想让滑块如何工作？自动化的吗？按钮按下的吗？有一些插件可能可以自动解决它。

- Nicolas Viennot · Answer 2

0

看那个东西：http://apirocks.com/html5/html5.html（使用Chrome测试）

- Nicolas Viennot

不错。非常接近我所需要的。不知道是否可以设置只有容器滑动，而标题和页脚保持不变。 - Jeffrey

我猜你可以用几个绝对定位的div来实现。 - Nicolas Viennot

好的，我已经尝试过了，但是相对位置的页脚一直无法保持在绝对定位的滑动容器下面... 你有什么想法吗？ - Jeffrey

链接已损坏，无法跟随。 - Don Cullen