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

ファイルがcssフォルダー内にあるため、画像パスが間違っていますbackground: url('images/arrowright.jpg') repeat;が、画像フォルダー内にあります。cssimages

../したがって、追加する必要があります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 に答える