jQuery Cycle 插件加载问题答案

【问题标题】：jQuery Cycle plugin load issuesjQuery Cycle 插件加载问题
【发布时间】：2012-05-04 08:28:06
【问题描述】：

我正在使用jQuery Cycle plugin 进行图像幻灯片放映。在我的 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.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 函数？

【问题讨论】：

标签： jquery jquery-cycle

【解决方案1】：

你能不能把 ul-li 换成一个 id 相同的 div。然后你必须修改img类：

<img class="slide" ...

最后在 CSS 中添加：

.slide {
    position: absolute;
    top: 0;
    left: 0;
}

使用此方法，在加载脚本之前，图像将位于其他图像之后，而不是其他图像下方。

【讨论】：