gpt4 book ai didi

jquery循环插件pager被覆盖

转载 作者:行者123 更新时间:2023-11-28 12:27:30 26 4
gpt4 key购买 nike

我正在尝试使用 jQuery 循环插件和允许导航的寻呼机选项创建一个自动图像 slider /旋转木马。

它的意思是从一个图像淡入到下一个图像,并提供一系列部分覆盖图像的分页元素,就像这个例子 here

无论出于何种意图和目的,它都运行良好,但无论我尝试将寻呼机元素放置在顶部时做什么,图像都会覆盖按钮。

我目前缺乏托管,我在本地做这一切,很抱歉没有现场例子;但这是代码。

HTML:

<head>
<title></title>
<link rel="stylesheet" type="text/css" media="screen" href="jquery.css" />
<script type="text/javascript" src="js/jquery-1.3.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#myslides')
.before('<div id="nav">')
.cycle({
fx: 'fade',
speed: 500,
timeout: 3000,
pager: '#nav'
});
});



</script>

</head>
<body>
<div id="content-area">
<div id="myslides">
<img src="pic1.jpg" />
<img src="pic2.jpg" />
<img src="pic3.jpg" />
<img src="pic4.jpg" />
<img src="pic5.jpg" />
</div>
</div>
</body>
</html>

CSS:

#myslides {
width: 586px;
height: 311px;
padding: 0;
margin: 0 auto;}
#myslides img {
padding: 10px;
border: 1px solid rgb(100,100,100);
background-color: rgb(230,230,230);
width: 586px;
height: 311px;
top: 0;
left: 0;}
#nav {
float: right;
position: absolute;
top: 200px;
float: right;}
.nav { margin: 5px 0; }
#nav a {
margin: 0 5px;
padding: 3px 5px;
border: 1px solid #ccc;
background: #fc0;
text-decoration: none }
#nav a.activeSlide { background: #ea0}
#nav a:focus { outline: none; }

当然还有上面列出的js文件:jquery-1.3.js & jquery.cycle.all.js

最佳答案

#nav 的 z-index 设置为 100。

寻呼机位于幻灯片图像下方的原因是循环插件会调整每张幻灯片的 z-index(以及其他内容)。

关于jquery循环插件pager被覆盖,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2239942/

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