jquery - jQuery 循环插件之上的 Div

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%;
}