jQuery Cycle 插件加载问题
我正在使用 jQuery Cycle 插件 进行图像幻灯片放映。 在我的 HTML 页面上，我创建了一个类名为 list 的无序列表 (ul)
<ul class="slide">
<li>
<img src="some_photo.png" />
<li>
<li>
<img src="another_photo.png" />
<li>
<ul>
在我的 HTML 页面中，我在 head 部分加载了两个 javascript：
<head>
...
<script type="text/javascript" src="/common/js/jquery.cycle.all.js"></script>
<script type="text/javascript" src="/common/js/index.js"></script>
...
</head>
index.html 的内容。 Node.js：
...
$(function() {
$('.slide').cycle({
fx:'fade',
speed: 500,
timeout: 3000,
pager: '.list',
activePagerClass: 'active',
pagerAnchorBuilder:function(index, DOMelement){
return '<li><a href="#"></a></li>';
}
});
...
我遇到的问题是，当我打开页面时，我首先看到图像的布局就好像它们一样 位于常规 ul 标记内（一个在另一个之上）。仅仅几秒钟后，脚本似乎就根据需要将它们转换为幻灯片。如何在页面加载这些图像之前启动 cycle 功能？
I am using jQuery Cycle plugin for images slideshow.
On my HTML page I create an unordered list (ul) with the class name of list
<ul class="slide">
<li>
<img src="some_photo.png" />
<li>
<li>
<img src="another_photo.png" />
<li>
<ul>
In my HTML page, I load two javascripts in the head section:
<head>
...
<script type="text/javascript" src="/common/js/jquery.cycle.all.js"></script>
<script type="text/javascript" src="/common/js/index.js"></script>
...
</head>
content of index.js:
...
$(function() {
$('.slide').cycle({
fx:'fade',
speed: 500,
timeout: 3000,
pager: '.list',
activePagerClass: 'active',
pagerAnchorBuilder:function(index, DOMelement){
return '<li><a href="#"></a></li>';
}
});
...
The problem that I am having is that when I open the page, I first see the images laid out as if they
were inside a regular ul tag (one on top of the other). Only a few seconds after, it seems that the script transforms them into a slideshow as desired. How can I initiate the cycle function before the page loads those images?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
你可以用具有相同 id 的 div 更改 ul-li 吗？
然后您必须修改 img 类：
最后在 CSS 中添加以下内容：
使用此方法，图像将在其他图像后面，而不是在其他图像下面，直到加载脚本。
Can you change ul-li with a div with same id.
Then you must modify the img class:
Finally add this in CSS:
With this method images will be one BEHIND the others and not one BELOW the others until the script is loaded.