Question

我设法使下一个/上一个按钮工作，但未能让它们实际显示，我尝试添加z-index但我想我可能做错了。 HTML：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="description" content="Beauchamp&#39;s Corporate offers a unique service for clients wishing to design a special product for their business.">
<title>Beauchamp&#39;s Corporate</title>

<link rel="stylesheet" href="css/style.css" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('#maximage').cycle({
        fx: 'scrollHorz', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
        speed: 1000,
        timeout: 7000,
        prev: '#arrow_left',
        next: '#arrow_right'
    });
});
</script>
<body>

        <div id="cycle-loader">
         </div>   

        <div id="maximage">
            <img src="images/boat1.jpg" alt="" />
            <img src="images/car1.jpg" alt="" />
            <img src="images/dock1.jpg" alt="" />
            <img src="images/glass1.jpg" alt="" />
            <img src="images/hotel1.jpg" alt="" />   
            <img src="images/table1.jpg" alt="" />         
        </div>

        <a href="" id="arrow_left" class="button" title="Previous Photo"></a>

        <a href="" id="arrow_right" class="button" title="Next Photo"></a>  

</body>
</html>

的CSS：

a.button {
    display:block;
    width:200px;
    height:200px;
    margin-top:200px;
    }

a#arrow_left{
    float:left;
    background: url('images/arrowleft.jpg') repeat;
    position: relative;
    z-index: 100;
}

a#arrow_right{
    float:right;
    background: url('images/arrowright.jpg') repeat;
    position: relative;
    z-index: 100;
}

#maximage { 
height: 100%; 
width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -5000; 
 }
#maximage img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -5000; 
}

Answer 1

您的图片路径错误background: url('images/arrowright.jpg') repeat;由于您的css文件位于 css 文件夹中，但您的images位于图片内文件夹。

因此，您需要在../

中添加background: url('images/arrowright.jpg') repeat;

并在background: url('images/arrowleft.jpg') repeat;

之前images/arrowright.jpg

因此，在添加../之后，您的css应该如下所示;

a#arrow_left{
    float:left;
    background: url('../images/arrowleft.jpg') repeat;
    position: relative;
    z-index: 100;
}

a#arrow_right{
    float:right;
    background: url('../images/arrowright.jpg') repeat;
    position: relative;
    z-index: 100;
}

下一个/上一个按钮工作但没有显示

1 个答案: