Web ページにクラウド カルーセルを実装しましたが、画像が円形にスクロールすると、データベースから php を介して動的コンテンツをロードすると、左側の画像が正しく表示されません。何が起こるかというと、後ろにあるはずの画像が実際には前にレンダリングされます。問題を確認するには、この画像を参照してください
カルーセルの問題 http://gzerodesign.com/images/carouselProblem.png
左側に見えるのは、Relay Health のロゴが前面にある位置です。右側は正常に動作します。動的画像をロードするときにこれを修正することは可能ですか?
ここに私のコードがあります
<script>
$(document).ready(function(){
// This initialises carousels on the container elements specified, in this case, carousel1.
$("#carousel1").CloudCarousel(
{
xPos: 490,
yPos:20,
buttonLeft: $("#left-but"),
buttonRight: $("#right-but"),
altBox: $("#alt-text"),
titleBox: $("#title-text"),
mouseWheel:true,
FPS:30,
speed:0.2,
mouseWheel:true,
reflHeight:40,
reflOpacity:.25,
reflGap:1,
yRadius:40,
xRadius:330,
minScale:.35,
autoRotate:'left'
}
);
});
</script>
<div id="carousel">
<h2>Success Stories</h2>
<!-- Define elements to accept the alt and title text from the images. -->
<!-- This is the container for the carousel. -->
<div id = "carousel1" style="width:840px; height:186px; z-index:1; left:-180px;background:none;overflow:scroll;">
<!-- All images with class of "cloudcarousel" will be turned into carousel items -->
<!-- You can place links around these images -->
<?php do { ?>
<a class="thumbnail" href="admin/edit_company.php?co_id=<?php echo $row_rsCompanies['co_id']; ?>" id="trigger"><img class = "cloudcarousel" src="images/logo/<?php echo $row_rsCompanies['co_picture']; ?>" border="0" />
<span><img src="images/logo/<?php echo $row_rsCompanies['co_picture']; ?>" />
<?php echo $row_rsCompanies['co_short_description']; ?>
</span>
</a>
<?php } while ($row_rsCompanies = mysql_fetch_assoc($rsCompanies)); ?>
<!--end id="carousel1"--></div>
<!--end id="carousel"--></div>
助けてくれてありがとう!!