Question

我正在使用jquery循环插件，我想在幻灯片上添加一段显示人们可以登录的部分。这是一个我希望它看起来的例子。

mycampus.astate.edu

我理解循环插件是如何工作的，我只是无法弄清楚如何把它放在它上面。我真的很感激所提供的任何帮助。

谢谢！

Answer 1

您可以使用幻灯片显示的一些选项轻松实现此目的：

首先，让我们添加登录框，在我的例子中它有id login，我们也会告诉插件根据选择器'＆gt;选择幻灯片。 div.cycle-slide'以便登录div不被视为幻灯片。最后，我们只需要确保并将登录框的z-index设置为幻灯片上方。

示例：http://jsfiddle.net/lucuma/87FUR/3/

HTML：

 <div class="cycle-slideshow item" data-cycle-timeout="3000" data-cycle-speed="2000" data-cycle-slides="> div.cycle-slide" data-cycle-fx="fade">
    <div id="login">Your Login here</div>
    <div class="cycle-slide">
        <img src="http://placehold.it/550x550/" />

    </div>
    <div class="cycle-slide">
        <img src="http://placehold.it/550x550/ff0000" /> 

    </div>
    <div class="cycle-slide">
        <img src="http://placehold.it/550x550/" />

    </div>
</div>

CSS：

div.cycle-slideshow {
    width: 550px;
    height: 550px;
}
#login {
    position: absolute;
    width: 200px;
    height: 400px;
    background-color:blue;
    top: 0;
    z-index: 99999;
    opacity: .5;
}
img {
    display:block;
    max-width:100%;
}

在jquery循环插件之上划分

1 个答案: