Jcarousel插件修改,以添加额外的导航控件

时间:2012-02-29 21:35:06

标签: jquery jcarousel

我让jcarousel设置为使用位于图像上方的标准左右箭头滚动一堆图像。 我还想在图像的底部添加一组导航箭头,但是需要给它们一个不同的类名,以便我可以设置它们的位置。 我需要在jcarousel javascript文件中编辑什么来添加这些额外的箭头? 我想这可能是在这段代码中......

    = this.list.wrap("<div></div>").parent();
if(this.container.size()===0)this.container=this.clip.wrap("<div></div>").parent();b!==""&&this.container.parent()[0].className.indexOf("jcarousel-skin")==-1&&this.container.wrap('<div class=" '+b+'"></div>');
this.buttonPrev=g(".jcarousel-prev",this.container);
if(this.buttonPrev.size()===0&&this.options.buttonPrevHTML!==null)this.buttonPrev=g(this.options.buttonPrevHTML).appendTo(this.container);
this.buttonPrev.addClass(this.className("jcarousel-prev"));
this.buttonNext= g(".jcarousel-next",this.container);
if(this.buttonNext.size()===0&&this.options.buttonNextHTML!==null)this.buttonNext=g(this.options.buttonNextHTML).appendTo(this.container);
this.buttonNext.addClass(this.className("jcarousel-next"));
this.clip.addClass(this.className("jcarousel-clip")).css({position:"relative"});
this.list.addClass(this.className("jcarousel-list")).css({overflow:"hidden",position:"relative",top:0,margin:0,padding:0}).css(this.options.rtl?"right":"left",0);
this.container.addClass(this.className("jcarousel-container")).css({position:"relative"});

1 个答案:

答案 0 :(得分:1)

你可以这样做:

$.mycarousel = function(e, o) {
var $elfCarousel = $(e).jcarousel(o), 
$actionsContainer="<div class='other_actions'></div>";
$elfCarousel.wrap("<div></div>").append($actionsContainer);
$actionsContainer.append("<div>bottom Next</div>").click(function(){
    $elfCarousel.find(".jcarousel-next").click();
})
$actionsContainer.append("<div>your other button here</div>").click(function(){/* your other action here*/})
$actionsContainer.append("<div>your last button here</div>").click(function(){/* your last action here*/})
}

通过创建自己的包装jcarousel插件,您将获得jcarousel错误更正的好处。