2010-05-17 44 views
3

我想安装一个全屏幕的jQuery滑块。我把这个项目分成了两个步骤1)CSS和2)js。CSS水平滚动溢出与jQuery滑块

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)投票,使用jQuery我想的div向左滑动他们点击后...像jQuery Coda Slider如果可能的话。

谢谢,任何帮助表示赞赏。

+0

损坏的链接,新链接很可能是这样的:http://kevinbatdorf.github.io/codaslider/ – 2016-08-08 23:20:30

回答

0

您需要通过设置容器div的CSS开始有一个固定的宽度和溢出设置为隐藏所以只有是什么内的区域显示出来:

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

你是怎么想的滑块上班?自动?按下按钮?还有一些大概可以照顾它自动

+0

我希望能够点击下一个div,向左滑动(有点像上图)。也在容器外,我需要有一个导航链接,将去的股利。 – Jeffrey 2010-05-17 17:41:51

+0

我真的需要它看起来像上面的图形,所以显示下一张幻灯片是至关重要的,所有的幻灯片将是不同的高度。所以我将设置overflow-x在主体中隐藏并剪辑:auto。 – Jeffrey 2010-05-17 17:57:04

0

看那个东西的几个插件:http://apirocks.com/html5/html5.html (测试与Chrome)

+0

不错。非常接近我需要的东西。不知道它是否可以设置,以便容器滑动并且页眉和页脚保持不变。 – Jeffrey 2010-05-17 18:04:12

+0

我想用几个绝对定位的div你可以 – 2010-05-17 20:23:08

+0

没问题,搞砸了它,我很难让相关页脚留在绝对滑动容器下面......任何想法。 – Jeffrey 2010-05-18 18:48:12