Question

我在wordpress网站上使用AJAX页面请求实现了一个jQuery轮播。现在轮播正在这个页面上工作：

但不是在用AJAX请求打开页面时。

如何解决此问题？

我收到一些javascript错误

jCarousel: No width/height set for items. This will cause an infinite loop. Aborting...

这很奇怪，因为正常的链接正常工作..

这是调用轮播的代码

 <script type="text/javascript">
  jQuery('ul#about-jcarousel').jcarousel({scroll: 1,visible: 3,wrap: 'circular'});
  jQuery('ul#about-jcarousel li').width(234);
</script>

编辑：通过添加脚本来调用carousel到启动ajax页面加载的js文件来解决问题。它现在正在工作，但不知何故，图像显示在彼此之上，通过调整浏览器的大小，显示得很完美....奇怪......

Answer 1

看起来您可能无法正确传递图片链接：

Syntax error, unrecognized expression: [href=http://different-agency.com/site/gallery/]

我猜你不应该在语法中包含数组的括号，特别是不包含引号。

Answer 2

正如我之前所说，图像是在旋转木马后加载的，所以旋转木马认为在调用时没有图像加载。

您可以通过打开firebug控制台并运行：

来测试

jQuery('ul#about-jcarousel').jcarousel({scroll: 1,visible: 3,wrap: 'circular'});

在命令行中。这使得旋转木马工作。

我不知道你是如何加载这些图片的，但我的建议是在加载页面时从你的javascript调用ajax来获取图像。

如：

jQuery(document).ready(function() {

jQuery.ajax({
            url: '/view/getImages',
            type: 'GET',
            dataType:"json",
            contentType: 'application/json',
            success: function (data){
                if (data.errorMsg){
                    alert(data.errorMsg);
                }else{
                    for( i=0; i < data.images.length; i++)
                    {
                        jQuery('ul#about-jcarousel').append(li).append('<img src='+data.images[i]+'/>')
                    }
                    jQuery('ul#about-jcarousel').jcarousel({scroll: 1,visible: 3,wrap: 'circular', itemFallbackDimension: 234});
                }
            }
       });
}

可能有更简单的方法，例如在加载图像的任何函数上使用回调函数。如果你使用框架加载它们，这可能是不可能的，所以这是我能给你的唯一答案。

jQuery Carousel没有按预期工作

2 个答案: