我正在使用jCarousel在显示图库的网站上工作。但无论我尝试什么，我都无法让它发挥作用，我需要在今天完成它。我有一个非常紧急的时间表。我的代码基本上从数据库中获取图像URL并将它们发送到AJAX，后者将其传递给创建库的jCarousel。但是有一些问题：
无法正确显示！我只能从数据库中取出最后一项，它显示在最底部的一行。
显示从数据库中提取的项目后，第一次点击“prev”时没有滚动效果，该项目就消失了！只有当我点击“下一步”2-3次才会有滚动效果并且该项目仍然可见。
我的项目总是显示在轮播的末尾！
这很紧急..请帮我解决这个问题。
about.html：
<!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" xml:lang="en-us">
<head>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="/lib/jquery.jcarousel.min.js"></script>
<link rel="stylesheet" type="text/css" href="/skins/tango/skin.css" />
<!--<style type="text/css">
#wrapper
{
width: 700px;
margin-left: auto;
margin-right: auto;
}
#carousel
{
margin-top: 120px;
padding-left: 120px;
}
#side
{
padding-left: 550px;
position: absolute;
padding-top: 120px;
}
#hidden
{
color: #FFFFFF;
}
</style>-->
<script type="text/javascript">
jQuery.easing['BounceEaseOut'] = function(p, t, b, c, d)
{
if ((t/=d) < (1/2.75))
{
return c*(7.5625*t*t) + b;
}
else if (t < (2/2.75))
{
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
}
else if (t < (2.5/2.75))
{
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
}
else
{
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
}
};
function mycarousel_initCallback(carousel)
{
jQuery('#mycarousel-next').bind('click', function() {
carousel.next();
return false;
});
jQuery('#mycarousel-prev').bind('click', function() {
carousel.prev();
return false;
});
};
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
easing: 'BounceEaseOut',
wrap: "first",
initCallback: mycarousel_initCallback,
animation: 1000,
scroll: 3,
visible: 3,
buttonNextHTML: null,
buttonPrevHTML: null
});
jQuery('#mycarousel2').jcarousel({
easing: 'BounceEaseOut',
animation: 1000,
wrap: "first",
initCallback: mycarousel_initCallback,
scroll: 3,
visible: 3,
buttonNextHTML: null,
buttonPrevHTML: null
});
jQuery('#mycarousel3').jcarousel({
easing: 'BounceEaseOut',
animation: 1000,
scroll: 3,
wrap: "first",
initCallback: mycarousel_initCallback,
visible: 3,
buttonNextHTML: null,
buttonPrevHTML: null
});
});
var prevButton = null;
function getObject(b, el)
{
var currbutton = b;
var http;
var url = "about.php";
var parameters = "d=carousel&cat=" + currbutton;
try
{
http = new XMLHttpRequest();
}
catch(e)
{
try
{
http = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
http = new ActiveXObject("Microsoft.XMLHTTP");
}
}
function getServer()
{
if (http.readyState == 4)
{
var i = 0;
var liArr = http.responseText;
var built = liArr.split(", ");
var li = document.createElement("li");
var ul1 = document.getElementById("mycarousel");
var ul2 = document.getElementById("mycarousel2");
var ul3 = document.getElementById("mycarousel3");
if (el != prevButton)
{
prevButton = el;
while (ul1.hasChildNodes() ) {ul1.removeChild(ul1.lastChild);}
while (ul2.hasChildNodes() ) {ul2.removeChild(ul2.lastChild);}
while (ul3.hasChildNodes() ) {ul3.removeChild(ul3.lastChild);}
}
else
return 0;
while (i < (built.length) / 3)
{
li.innerHTML = built[i];
ul1.appendChild(li);
i++;
}
while (i < ((built.length) / 3)*2)
{
li.innerHTML = built[i];
ul2.appendChild(li);
i++;
}
while (i < (built.length))
{
li.innerHTML = built[i];
ul3.appendChild(li);
i++;
}
}
}
http.open("POST", url, true);
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.setRequestHeader("Content-length", parameters.length);
http.setRequestHeader("Connection", "close");
http.onreadystatechange = getServer;
http.send(parameters);
}
</script>
</head>
<body>
<span id="hidden"> </span>
<div id="wrapper">
<div id="side">
<form name="cats">
<input type="button" value="Hats" onclick="getObject('hats', this);"/><br />
<input type="button" value="Pants" onclick="getObject('pants', this);"/><br />
<input type="button" value="Shirts" onclick="getObject('shirts', this);"/><br />
</form>
</div>
<div id="carousel">
<ul id="mycarousel" class="jcarousel-skin-tango">
</ul>
<ul id="mycarousel2" class="jcarousel-skin-tango">
</ul>
<ul id="mycarousel3" class="jcarousel-skin-tango">
</ul>
<input type="button" id="mycarousel-prev" value="prev" />
<input type="button" id="mycarousel-next" value="next" />
</div>
</div>
</body>
</html>
我对CSS进行了评论，因为我觉得它给我带来了麻烦，但说实话，我不知道jCarousel到底发生了什么。
about.php：
<?php
echo "<img width='75' height='75' src='http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg' />, hi, hi, hi, hi, hi, hi, hi, hi";
?>
此外，即使没有其他项目显示，我仍然可以向后滚动，但不能向前滚动，因为我的项目总是放在旋转木马的末尾。
我知道它看起来像很多代码，但实际上并非如此！我的格式化需要很多行，注释的CSS需要很多，而且很多代码都是HTML和jCarousel配置，还有BounceEasing效果需要几行。实际代码不多！
正如我所说，这是紧急的，我需要修复这个问题。但我无法让它发挥作用。请帮帮我！
谢谢你的时间！
编辑：
我稍微更改了代码，但它仍然无效。我真的需要这方面的帮助!!
编辑：
我添加了document.createElement（“li”）;到每个while循环。现在显示我的所有项目，但它们在每行上垂直显示而不是水平显示。除此之外，所有其他问题都是一样的。
编辑：
哦，而且，在我的图像显示的行中，只有图像在那里。也许jCarousel不接受img和text，我不知道。
编辑：
我正在重新加载行，但它不会改变任何东西。此外，我尝试添加更多图像而不是“hi”，似乎无论如何，我只能在第一行显示1个项目。
编辑：
用if（state =='init'）包围initCallback函数。它只是部分有效。只有当刷新页面很多次并发送垃圾邮件时，我才能使用它。在第10次点击之前没有滚动效果。并且，第一行仍然只包含1个项目，它们都是垂直的。我认为第一行只有一个项目，因为我在那里放了一个图像，旋转木马有一个固定的高度，所以下一个项目没有位置，只是删除它。
编辑：
仅当我在图像加载的同一时刻单击prev按钮时，它才有效。我的意思是，完全相同的时刻。在代码方面，这意味着什么？我该如何解决？？？？？？请帮忙！
答案 0 :(得分：2)
我认为，有一件事是你创建一个li并更改其属性并将其附加到不同的ul。您应该做的是将document.createElement('li')移动到循环中并每次创建一个新的（或克隆旧的循环）。
所以，基本上用这个：
while (i < (built.length) / 3)
{
li = document.createElement('li');
li.innerHTML = built[i];
ul1.appendChild(li);
i++;
}
while (i < ((built.length) / 3)*2)
{
li = document.createElement('li');
li.innerHTML = built[i];
ul2.appendChild(li);
i++;
}
while (i < (built.length))
{
li = document.createElement('li');
li.innerHTML = built[i];
ul3.appendChild(li);
i++;
}