全部，
我是jquery的新手，我想在另一个jquery插件（带有灰色背景的jquery弹出窗口）中加入'Cloud Carousel'插件。但是，我正在努力使其发挥作用。
虽然通常“云旋转木马”显示为您在其网站上看到的，但在我的实施中，所有图像都是彼此叠加的，就好像它们坐在堆叠中一个接一个地出现在顶部。请给新手指导吗？
最佳， 这是下面的代码
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<link href="facebox.css" media="screen" rel="stylesheet" type="text/css" />
<link href="css/example.css" media="screen" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script src="facebox.js" type="text/javascript"></script>
<script type="text/javascript" src="js/cloud-carousel.1.0.4.js"></script>
<script type="text/javascript" src="js/cloud-carousel.1.0.4.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox({
loadingImage : 'images/loading.gif',
closeImage : 'images/close.png'
})
$("#carousel1").CloudCarousel(
{
xPos: 170,
yPos: 40,
buttonLeft: $("#left"),
buttonRight: $("#right"),
altBox: $("#alt-text"),
titleBox: $("#title-text")
}
);
})
</script>
</head>
<body>
<div class="example">
<p> <a href="#info" rel="facebox">Templates</a> </p>
</div>
<div id="info" style="display:none;">
<div id = "carousel1" style="width:400px; height:200px;position: relative;overflow:scroll;">
<img class = "cloudcarousel" src="button_images/1.png" alt="Flag 1 Description" title="Flag 1 Title" width="100px" height="100px" />
<img class = "cloudcarousel" src="button_images/10.png" alt="Flag 2 Description" title="Flag 2 Title" width="100px" height="100px"/>
<img class = "cloudcarousel" src="button_images/11.png" alt="Flag 3 Description" title="Flag 3 Title" width="100px" height="100px"/>
<img class = "cloudcarousel" src="button_images/14.png" alt="Flag 4 Description" title="Flag 5 Title" width="100px" height="100px"/>
<img class = "cloudcarousel" src="button_images/18.png" alt="Flag 4 Description" title="Flag 5 Title" width="100px" height="100px"/>
<img class = "cloudcarousel" src="button_images/19.png" alt="Flag 4 Description" title="Flag 5 Title" width="100px" height="100px"/>
<img class = "cloudcarousel" src="button_images/2.png" alt="Flag 4 Description" title="Flag 5 Title" width="100px" height="100px"/>
<img class = "cloudcarousel" src="button_images/20.png" alt="Flag 4 Description" title="Flag 5 Title" width="100px" height="100px"/>
<img class = "cloudcarousel" src="button_images/21.png" alt="Flag 4 Description" title="Flag 5 Title" width="100px" height="100px"/>
<img class = "cloudcarousel" src="button_images/4.png" alt="Flag 4 Description" title="Flag 5 Title" width="100px" height="100px"/>
<img class = "cloudcarousel" src="button_images/5.png" alt="Flag 4 Description" title="Flag 5 Title" width="100px" height="100px"/>
<img class = "cloudcarousel" src="button_images/6.png" alt="Flag 4 Description" title="Flag 5 Title" width="100px" height="100px"/>
<img class = "cloudcarousel" src="button_images/7.png" alt="Flag 4 Description" title="Flag 5 Title" width="100px" height="100px"/>
<img class = "cloudcarousel" src="button_images/8.png" alt="Flag 4 Description" title="Flag 5 Title" width="100px" height="100px"/>
<button id="left"> Left</button>
<button id="right" onclick="alert('right')">Right</button>
</div>
</div>
</body>
</html>
答案 0 :(得分：3)
在您使用适当的选择器调用cloudCarousel函数之前，它看起来全部堆叠。一旦文档准备就绪，您需要调用该函数。 这是一个例子
jQuery(function(){
jQuery("#carousel1").CloudCarousel({
xPos: 300,
yPos: 60,
buttonLeft: jQuery("#left-but"),
buttonRight: jQuery("#right-but")
});
});
答案 1 :(得分：0)
Federico Zuppa清楚地提供了Zain正在寻找的答案，但是我的评论非常密切，我将其添加到这里：
在页面加载期间，图像以垂直堆栈显示，直到CloudCarousel加载为止。
您可以（无害地）通过使用css隐藏图像来防止这种情况。然后按如下方式显示它们：
$("#carousel1").CloudCarousel({ ... });
$('#carousel1 ... img').delay(1000).fadeIn(600);
延迟是必要的，因为CloudCarousel需要一些时间来重新定位图像 - 只是因为你的.fadeIn（）来自你的.CloudCarousel（）并不意味着它会起作用。您的图像仍然会向左对齐，然后在屏幕上重新排列。
fadeIn是必要的，因为.delay不能与不排队项目的jquery函数一起使用（参见http://api.jquery.com/delay/）。
答案 2 :(得分：0)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
<title>The Planets - Cloud Carousel Arbitrary HTML Demo</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="carousel.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" type="text/javascript" src="jquery.min.js"></script>
<script language="JavaScript" type="text/javascript" src="jquery-ui.min.js"></script>
<script language="JavaScript" type="text/javascript" src="cloud-carousel.1.0.5-x.js">
</script>
<script language="JavaScript" type="text/javascript" src="jquery.mousewheel.min.js">
</script>
</head>
<body>
<div id="wrap">
<div id="contents">
<div id="homecontents">
<div id = "carousel1">
<!-- All elements with class of "cloudcarousel" will be turned into carousel
items -->
<!-- You can place arbitrary html inside these elements - although each should
contain at least one image tag -->
<div class = "cloudcarousel" />
<img src="images/image1.jpeg" alt="GarField Cartoon Cat" title="GarField Cat"
/>
<div class="caption lower center spacy" style="color:#00FFFF;">GarField Cartoon
Cat</div>
</div>
<div class = "cloudcarousel" />
<img src="images/image2.jpeg" alt="Mickey Mouse Cartoon" title="Mickey Mouse"
/>
<div class="caption lower center spacy" style="color:#00FFFF;">Mickey Mouse
Cartoon</div>
</div>
<div class = "cloudcarousel" />
<img src="images/image3.jpeg" alt="Cute Bunny Cartoon" title="Cute Bunny" />
<div class="caption lower center spacy" style="color:#00FFFF;">Cute Bunny
Cartoon</div>
</div>
<div class = "cloudcarousel" />
<img src="images/image4.jpeg" alt="Bugs Bunny Cartoon" title="Bugs Bunny" />
<div class="caption lower center spacy" style="color:#00FFFF;">Bugs Bunny
Cartoon</div>
</div>
<div class = "cloudcarousel" />
<img src="images/image5.jpeg" alt="Calven and Hobbes Cartoon" title="Calven and
Hobbes" />
<div class="caption lower center spacy" style="color:#00FFFF;">Calven and Hobbes
Cartoon</div>
</div>
<div class = "cloudcarousel" />
<img src="images/image6.jpeg" alt="Winnie The Pooh Cartoon" title="Winnie the
Pooh" />
<div class="caption lower left spacy" style="color:#00FFFF;">Winnie The Pooh
Cartoon</div>
</div>
<div class = "cloudcarousel" />
<img src="images/image7.jpeg" alt="Little Chick Cartoon" title="Little Chick" />
<div class="caption lower center spacy" style="color:#00FFFF;">Little Chick
Cartoon</div>
</div>
<div class = "cloudcarousel" />
<img src="images/image8.jpeg" alt="Mini Mouse Cartoon" title="Mini Mouse" />
<div class="caption lower center spacy" style="color:#00FFFF;">Mini Mouse
Cartoon</div>
</div>
</div>
<div id="buttons1">
<!-- Define left and right buttons. -->
<input id="left-but" type="button" value="Left" />
<input id="right-but" type="button" value="Right" />
</div>
<div id="text1">
<!-- Define elements to accept the alt and title text from the images. -->
<p id="title-text"></p>
<p id="alt-text"></p>
</div>
<!-- Initialize the carousels -->
<script language="JavaScript" type="text/javascript">
$(document).ready(function(){
// This initialises carousels on the container elements specified, in this
case, carousel1.
$("#carousel1").CloudCarousel(
{
xPos: 494,
yPos: 100,
yRadius: 120,
buttonLeft: $("#left-but"),
buttonRight: $("#right-but"),
altBox: $("#alt-text"),
titleBox: $("#title-text"),
reflHeight: 65,
reflGap: 4,
reflOpacity: 0.5,
FPS: 30,
speed:0.2,
minScale: 0.7,
mouseWheel: true
}
);
});
</script>
</div>
<div class="clear"></div>
</div>
答案 3 :(得分：0)
/* style.css */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* end of reset css */
body {
background-color: #000000;
font-family: arial;
color: #eeeedd;
margin: 0px;
}
a {
color: #7799FF;
text-decoration: none;
}
h2 {
font-size: 18px;
}
#wrap {
background-color: #000000;
height: 550px;
}
#contents {
top: 30px;
position: relative;
}
#buttons1,#text1,#buttons2,#text2 {
margin-left: 100px;
}