点击标签，通过jquery.jcarousel动态axaj加载内容，实现跑马灯效果

jquery下的jquery.jcarousel插件跑马灯效果非常好，写法也很简单。

我遇到的情况是，左边有三个品牌标签，右边的区域显示对应的产品。且同时只显示三个品牌标签下面的任一种产品，右边区域显示的内容，通过点击左边的品牌标签切换。

实现方法如下：

<li onclick="GetProduct('3','1')">品牌1</li><li onclick="GetProduct('2','2')">品牌2</li><li onclick="GetProduct('1','3')">品牌3</li>
<div class="recon">
<ul id="mycarousel_1" class="jcarousel-skin-tango">
</ul>
<ul id="mycarousel_2" class="jcarousel-skin-tango">
</ul>
<ul id="mycarousel_3" class="jcarousel-skin-tango">
</ul>
</div>

 

function mycarousel_initCallback(carousel)
{
carousel.clip.hover(function() {
carousel.stopAuto();
}, function() {
carousel.startAuto();
});
};
function GetProduct(id, iIndex){
url = "tjproduct.asp?id="+id;
$.get(url,function(data){
$("#mycarousel_"+iIndex).html(data);
$("#mycarousel_"+iIndex).jcarousel({
auto: 2,
scroll:1,
wrap: 'circular',
initCallback: mycarousel_initCallback
});
});
for(i=1;i<=3;i++){
if(i==iIndex){
$(".recon .jcarousel-skin-tango:eq("+(i-1)+")").show();
}else{
$(".recon .jcarousel-skin-tango:eq("+(i-1)+")").hide();
}
}
};

实际上就是对三个ul同时实现跑马灯效果，但同时只显示一个，通过点击标签切换。想只用一个ul的，但是花了一天的时间，也没解决掉，只好用这种最简单的方法了。