点击标签,通过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的,但是花了一天的时间,也没解决掉,只好用这种最简单的方法了。

原文地址:https://www.cnblogs.com/chendaoyin/p/2807616.html