gpt4 book ai didi

jQuery cycle2 寻呼机不工作

转载 作者:行者123 更新时间:2023-11-28 18:02:48 24 4
gpt4 key购买 nike

我已经尝试了所有可能的方法来让 cycle2 寻呼机正常工作,但我尝试过的任何方法都没有任何效果。我已经复制并粘贴了演示页面中的示例,并将代码包含在此处 - 它非常小。 cycle.css 文件是演示中 CSS 文件的精确副本,没有任何修改。

有什么症状?寻呼机以位于页面左侧的非常小的黑色子弹形式出现。我在期待什么?较大的彩色元素符号居中放置,如演示中所示。

我到处搜索其他帖子,但没有找到答案。谁能帮忙。如果你想看看我看到的,那么这里是 url:http://school4kids.org/test-cycle2.asp

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<!-- Stylesheets -->
<link rel=stylesheet href="http://fonts.googleapis.com/css?family=Acme">
<link rel=stylesheet href="http://www.malsup.com/jquery/cycle2/site.css">
<link rel=stylesheet href="http://www.malsup.com/jquery/cycle2/demo/demo-slideshow.css">

<!-- Javascripts -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.js"></script>


</head>

<body>


<br><br>

<div class="example-pager"></div>
<div class="cycle-slideshow"
data-cycle-fx=scrollHorz
data-cycle-timeout=2000
data-cycle-pager=".example-pager"
>
<!-- empty element for pager links -->
<div class="cycle-pager"></div>
<img src="http://jquery.malsup.com/cycle2/images/p1.jpg">
<img src="http://jquery.malsup.com/cycle2/images/p2.jpg">
<img src="http://jquery.malsup.com/cycle2/images/p3.jpg">
<img src="http://jquery.malsup.com/cycle2/images/p4.jpg">
</div>
<div class="example-pager"></div>

<br><br>


</body>

</html>

附加信息经过更多的探索,我意识到 site.css 中有一些东西正在发挥一些魔力,如果没有那个文件,一切都无法正常工作。我将它精简到最低限度(我不想要这一切,因为它传达了我自己的风格)并发现将子弹放在正确位置所需的部件。将其与之前的解决方案相结合,然后一切正常。我现在不包含演示中的任何样式文件,而是创建了我自己的 css 文件,其中仅包含以下内容:

.cycle-pager { display: block; }

.example-pager { text-align: center; width: 100%; z-index: 500; top: 10px; overflow: hidden; font-family: Arial; font-size: 14px; line-height: 18px; color: #333; }
.example-pager span { font-size: 50px; width: 16px; height: 16px; display: inline-block; color: #ddd; }
.example-pager span.cycle-pager-active { color: #D69746;}
.exmaple-pager > * { cursor: pointer;}

最佳答案

Nikhil 的回答对我没有用,但它让我更深入地研究 CSS 并尝试更多的东西。

我的问题是寻呼机根本没有显示 -> 它就像隐藏在图像下面一样。

最后我将 overflow: hidden 设置为 overflow: visible 并且它像宣传的那样工作。

关于jQuery cycle2 寻呼机不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20118366/

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