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