Question

我正在尝试设置全屏jquery滑块。我把项目分成了两个步骤：1）css和2）js。

1）CSS ，下面是我正在拍摄的照片（没有固定的高度），下面是我到目前为止无法使用的代码。

Example http://i43.tinypic.com/a1ocxj.jpg

<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一样。

谢谢，感谢任何帮助。

Answer 1

您需要首先将容器div的css设置为固定宽度并将溢出设置为隐藏，以便只显示该区域内的内容：

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

你是怎么想让滑块工作的？自动？按键？有一些插件可以自动处理它

Answer 2

看那件事：http://apirocks.com/html5/html5.html （使用Chrome测试）

CSS水平滚动溢出与jQuery滑块

2 个答案: