这是我需要做的:我有一个包含三个图片库的单页布局(但我只需要为一个库编写代码,我只需为其他两个库复制它),设置如下图片。 940px 区域(白色)是居中的布局宽度和内容区域, slider 控件在它外面(如果包括灰色区域,整个布局居中 1200px),我在那里一次显示 3 张图像。
现在的代码是(#horizontalDiv 是图像的#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) 使图像并排显示(试过 float:left 但它不起作用,我还需要什么吗?)
2) 让 div 中的那些“消失”所以它们不可见(我很确定我必须使用溢出:隐藏但是因为我不能并排显示图像我没有尝试还没有。
我需要最简单的解决方案,因为我在 div 中同时显示了三个图像,就像我的布局中的这样,而其他图像则水平隐藏(一个用于此部分,两个相同的部分在这张下面有不同的图片)也因为我需要设置一个我不太熟悉的 jquery slider ,所以标记越复杂,我在集成 slider 时遇到的问题就越多。
我知道这应该很简单,但是所有类似 NivoSlider 的东西似乎每个人都喜欢大的单图图像显示而不是滑动图像,我找不到适合我需要的东西。
最佳答案
我推荐使用 jQuery Cycle2 插件,它可以将任何元素变成幻灯片。基本上,您将它附加到父元素,所有子元素都将变成幻灯片,无论它们包含什么。
在您的情况下,以下应该有效:
<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript' src='jquery.cycle2.min.js'></script>
<div id="horizontalDiv" class="cycle-slideshow" 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, 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>
资源:
- jQuery Cycle2 插件 - http://jquery.malsup.com/cycle2/
- jQuery Cycle2 的大量演示:http://jquery.malsup.com/cycle2/demo/
关于html - 具有大量水平图像的稳定宽度 div,为 jquery slider 做准备,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17926110/