Question

我正在尝试创建一个循环浏览图片列表的网站。一切正常，但“下一页”和“上一页”按钮似乎隐藏在包含照片的<div>下面。为什么z-index没有纠正这个问题？（见两条标记线）

<?php error_reporting( E_ALL ); ?>
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.js"></script>
<script src="http://malsup.github.io/jquery.cycle2.center.js"></script>
<meta http-equiv="content-type" content="text/html; charset=utf-8" >
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">

body{
    background-color: black;
}

</style>
</head>

<body>

<div class="cycle-slideshow"
    data-cycle-loader="wait"
    data-cycle-fx="fade"
    data-cycle-timeout="0"
    data-cycle-prev=".prevControl"
    data-cycle-next=".nextControl"
    data-cycle-center-vert=true
    data-cycle-center-horz=true 

    <!--***** Z-INDEX FOR <DIV> WITH PICTURES *****-->

    style="margin-top:-2%; margin-bottom: -3%; z-index: 1;"> 
    <div class="cycle-prev"></div>
    <div class="cycle-next"></div>
    <img src="pictures/Addison Dunne Portfolio.jpg" width="75%" height="75%">
    <img src="pictures/Addison Dunne Portfolio10.jpg" width="75%" height="75%">
    <img src="pictures/Addison Dunne Portfolio11.jpg" width="75%" height="75%">


</div>

<!--***** Z-INDEX FOR <DIV> WITH PREV/NEXT  BUTTONS*****-->

<div align=center style="z-index: 2;">
    <span class="prevControl" style="font-size: 35px;"><span style="color:gray">&lt;&lt;</span>&nbsp&nbsp&nbsp&nbsp     </span>
    <span class="nextControl" style="font-size: 35px;"> <span style="color:gray">&gt;&gt;</span></span>
</div>

</body>
</html>

注意：以下是我尝试使用的网站：http://kdrdetroit.com/AddisonDunne/index.php

周期2＆＃34;下一步＆＃34;按钮不起作用

0 个答案: