0

我已经设法使下一个/上一个按钮工作，但未能让它们实际显示，我尝试添加 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; 
}
4

1 回答 1

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;
}
于 2012-09-05T10:40:10.700 回答