See jsfiddle here

Question

我正在尝试创建一个网站，而不是拥有不同的页面，我循环通过不同的div来显示不同的内容。我正在寻找的东西看起来很像这个网站上发生的事情：http://www.nexon.com/Home/Game.aspx

我希望这些div在点击时从右到左“从左到右”“飞”。我试图理解网站上的代码，但它让我非常困惑。

我认为没有必要发布代码，因为我的div的内容无关紧要，但为了进一步完成这个问题，这就是div之一：/ / p>

<div>
    <img />
    <h2>Some header</h2>
    <p>Some text</p>
    <img />
    <p>More text</p>
</div>

所以现在我想以与提到的网站相同的方式遍历这些div。

Answer 1

我使用了一个名为JQuery Cycle 2的jquery库。它是非常可定制的，允许您自动更改div或点击您在问题中提到的点击。该网站有非常详尽的文档。

Answer 2

您可以使用jQuery lbs slider！

把任何内容放在div中，就像照片文字视频一样，它会起作用！

见下面的链接

See jsfiddle here

enter image description here

<强> HTML

<div class="slider-wrap">
<div class="slider">
    <ul>
        <li>
            <div class="black"> <img src="http://placekitten.com/g/200/200"></div>
        </li>
        <li>
            <span class="red">text 1</span>
            <span class="blue">text 2</span>
            <span class="blue"><img src="http://placekitten.com/g/200/300" width="100"></span>
            <span class="blue"></span>
        </li>
        <li>
            <span class="yellow" style="width:300px;height:200px;">
                <iframe width="300" height="200" src="//www.youtube.com/embed/z0DCGnm429Y?list=UUDw2o0zdKA_TS3BsCgbyH4A" frameborder="0" allowfullscreen></iframe>
            </span>
        </li>
        <li>
            <span class="blue"></span>
        </li>
        <li>
            <span class="green"></span>
        </li>
    </ul>
</div>
<a href="#" class="slider-arrow sa-left">&lt;</a>
<a href="#" class="slider-arrow sa-right">&gt;</a>
</div>

<强> CSS

.slider-wrap {position: relative;margin: 50px auto;}
.slider {
    position: relative;
    margin: auto;
}
ul {
    margin: 0;
    padding:0;
}
ul li {
    list-style: none;
    text-align: center;
}
ul li span {
    display: inline-block;
    vertical-align: middle;
    width: 100px;
    height: 100px;
    background: black;
    margin:5px;
}

.slider-arrow {
    position: absolute;
    top: 40px;
    width: 20px;
    height: 20px;
    background: black;
    color: #fff;
    text-align: center;
    text-decoration: none;
    border-radius: 50%;
}

.sa-left {left: 10px;}
.sa-right {right: 10px;}

.black {}
.red {background: red;}
.green {background: green;}
.blue {background: blue;}
.yellow {background: yellow;}

<强> JS

jQuery('.slider').lbSlider({
    leftBtn: '.sa-left',
    rightBtn: '.sa-right',
    visible: 3,
    autoPlay: true,
    autoPlayDelay: 10
});

Answer 3

一般的想法是有一个“窗口”div作为你的内容div的视口。将内容div设置为display: inline，您可以通过调用jQuery.animate来实现所需的效果，该调用将“窗口”div的内部移动到单个内容div的宽度。这是相当容易出错的，更不用说结束状态，启动/停止，重新循环等代码的繁琐。所以通常建议使用一个好的旋转木马库，这里有很多。

以下是自己动手的示例

JSFiddle Example

以下是一些流行的旋转木马插件（几乎只是谷歌搜索'jquery carousel'）

slick

jCarousel

如何使用div进行移动循环

3 个答案:

See jsfiddle here