Question

我正在使用jQuery Cycle plugin进行图片幻灯片放映。在我的HTML页面上，我创建了一个无序列表（ul），其类名为list

<ul class="slide">
 <li>
   <img src="some_photo.png" />
 <li>
 <li>
   <img src="another_photo.png" />
 <li>
<ul>

在我的HTML页面中，我在head部分加载了两个javascripts：

<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功能？

Answer 1

您可以使用具有相同ID的div更改ul-li。然后你必须修改img类：

<img class="slide" ...

最后在CSS中添加：

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

使用此方法，图像将成为其他图像，而不是其他图像，直到加载脚本为止。

jQuery Cycle插件加载问题

1 个答案: