html – 具有大量水平图像的稳定宽度div,以准备jquery滑块

概述这就是我需要做的事情：我有一个带有三个图像库的单页面布局(但我需要只为其中一个做代码,我只是将其复制到另外两个),这些图像设置如图像中所示. 940px区域(白色区域)是居中布局宽度和内容区域,滑块控件位于其外部(如果包含灰色区域,整个布局为1200px居中)并且我一次显示3个图像. 现在的代码是(#horizo​​ntalDiv是图像的#container)： <div id="horizont 这就是我需要做的事情：我有一个带有三个图像库的单页面布局(但我需要只为其中一个做代码,我只是将其复制到另外两个),这些图像设置如图像中所示. 940px区域(白色区域)是居中布局宽度和内容区域,滑块控件位于其外部(如果包含灰色区域,整个布局为1200px居中)并且我一次显示3个图像.

现在的代码是(#horizo​​ntaldiv是图像的#container)：

<div ID="horizontaldiv">    <h2>My h2</h2>    <p>Lorem ipsum dolor sit amet,consectetur adipisicing elit. ReicIEndis,perspiciatis,officIIS,commodi,quis aut eligendi quaerat recusandae placeat nostrum optio maiores voluptates quas repudiandae atque voluptatibus laboriosam itaque mollitia dignissimos!</p>    <div ID="imgSlIDer">        <img src="img/uvaDx.png" alt="">        <img src="img/slIDerCantina1.png" alt="">        <img src="img/slIDerCantina2.png" alt="">        <img src="img/slIDerCantina3.png" alt="">        <img src="img/slIDerCantina1.png" alt="">        <img src="img/slIDerCantina2.png" alt="">        <img src="img/slIDerCantina3.png" alt="">        <img src="img/uvaSx.png" alt="">    </div></div>

我的布局现在看起来像这样：

我已经将图像集中在一起,我现在隐藏了两个控制箭头,但其余部分已经设定好了.

基本上我的问题是

为图像设置容器div的最佳方法是什么,以显示我拥有的所有图像(让我们说它是50)准备插入一个jquery插件(仍然需要决定哪个,任何建议？)来滑动所有图像那个div？

我做不到以下事情：

1)使图像并排显示(试过漂浮：左边但它不起作用,我还需要其他什么吗？)

2)让div中的那些“消失”所以它们不可见(我很确定我必须使用溢出：隐藏但是因为我不能并排显示图像我还没有尝试过.

我需要最简单的可能解决方案,因为我在div中同时显示三个图像,而其他图像在水平方向隐藏(一个用于此部分,两个相同的部分用不同的图像在此下面)也因为我我需要设置一个我不太熟悉的jquery滑块,因此标记越复杂,我将整合滑块的问题就越多.

我知道这应该很简单,但是对于所有类似NivoSlIDer的东西,每个人似乎都喜欢大的单图像显示而不是滑动的,我找不到任何符合我需求的东西.

解决方法 我建议使用jquery Cycle2插件,它将任何元素转换为幻灯片.基本上,您将它附加到父元素,并且所有子项都将成为幻灯片,无论它们包含什么.

在您的情况下,以下应该工作：

<script type='text/JavaScript' src='jquery.Js'></script><script type='text/JavaScript' src='jquery.cycle2.min.Js'></script><div ID="horizontaldiv"  data-cycle-slIDes="#imgSlIDer > img" data-cycle-timeout="0" data-cycle-prev="[ID OF PREVIoUS button]" data-cycle-next="[ID OF NEXT button]">    <h2>My h2</h2>    <p>Lorem ipsum dolor sit amet,quis aut eligendi quaerat recusandae placeat nostrum optio maiores voluptates quas repudiandae atque voluptatibus laboriosam itaque mollitia dignissimos!</p>    <div ID="imgSlIDer">        <img src="img/uvaDx.png" alt="">        <img src="img/slIDerCantina1.png" alt="">        <img src="img/slIDerCantina2.png" alt="">        <img src="img/slIDerCantina3.png" alt="">        <img src="img/slIDerCantina1.png" alt="">        <img src="img/slIDerCantina2.png" alt="">        <img src="img/slIDerCantina3.png" alt="">        <img src="img/uvaSx.png" alt="">    </div></div>

资源：

> jquery Cycle2插件 – http://jquery.malsup.com/cycle2/
> jquery Cycle2：http://jquery.malsup.com/cycle2/demo/的众多演示

总结

以上是内存溢出为你收集整理的html – 具有大量水平图像的稳定宽度div,以准备jquery滑块全部内容，希望文章能够帮你解决html – 具有大量水平图像的稳定宽度div,以准备jquery滑块所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。