4

这是我需要做的：我有一个包含三个图像画廊的一页布局（但我只需要为一个做代码，我只需为另外两个复制它），它们的设置如图所示。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）让图像并排显示（试过float：left但它不起作用，我还需要什么吗？）

2）使那些从 div “消失”，所以它们不可见（我很确定我必须使用溢出：隐藏但由于我不能并排显示图像我还没有尝试。

我需要最简单的解决方案，因为我的布局中同时在 div 中显示了三个图像，而其他图像则水平隐藏（一个用于此部分，两个相同的部分在此部分下方具有不同的图像）也是因为我需要设置一个我不太熟悉的 jquery 滑块，所以标记越复杂，我在集成滑块时遇到的问题就越多。

我知道这应该很简单，但是对于所有类似 NivoSlider 的东西，每个人似乎都喜欢大的单图像图像而不是滑动图像，我找不到任何适合我需要的东西。

4

1 回答 1

1

我推荐使用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>

资源：

于 2013-07-30T14:06:31.273 回答