Div在jquery循环插件的顶部

Question

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

mycampus.astate.edu

我知道循环插件是如何工作的，我只是不知道如何把东西放在上面。我将非常感谢您提供的任何帮助。

谢谢!

Answer 1

您可以使用幻灯片的几个选项轻松实现这一点:

首先，让我们添加登录框，在我的例子中，它的id是login，我们还将告诉插件根据选择器'>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%;
}