gpt4 book ai didi

jquery - 下一个/上一个按钮工作但不显示

转载 作者:太空宇宙 更新时间:2023-11-04 15:39:55 25 4
gpt4 key购买 nike

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

最佳答案

你的图片路径是错误的 background: url('images/arrowright.jpg') repeat; 因为你的 css 文件在 css 文件夹,但您的 images 位于 images 文件夹中。

所以需要在background: url('images/arrowright.jpg') repeat;中添加../;

并在背景中: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;
}

关于jquery - 下一个/上一个按钮工作但不显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12279531/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com