冻结下一个和上一个事件

时间:2015-05-18 11:03:37

标签: javascript jquery

我使用下面的javaScript来控制下一个和上一个事件。

JS:

var nextprev=setting.nextprev
    if (typeof toc=="string" && toc!="markup" || typeof toc=="object"){
        for (var i=1; i<=setting.contentdivs.length; i++){
            phtml+='<a href="#'+i+'" class="toc">'+(typeof toc=="string"? toc.replace(/#increment/, i) : toc[i-1])+'</a> '
        }
        phtml=(nextprev[0]!=''? '<a href="#prev" class="prev">'+nextprev[0]+'</a> ' : '') + phtml + (nextprev[1]!=''? '<a href="#next" class="next">'+nextprev[1]+'</a>' : '')
        pdiv.innerHTML=phtml
    }

HTML中包含的脚本如下所示。

featuredcontentslider.init({
    id: "slider1",  //id of main slider DIV
    contentsource: ["inline", ""],  //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
    toc: "&nbsp;",  //Valid values: "#increment", "markup", ["label1", "label2", etc]
    nextprev: ["&nbsp;", "&nbsp;"],  //labels for "prev" and "next" links. Set to "" to hide.
    revealtype: "click", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
    enablefade: [false],  //[true/false, fadedegree]
    autorotate: [false],  //[true/false, pausetime]
    onChange: function(previndex, curindex, contentdivs){  //event handler fired whenever script changes slide
        //previndex holds index of last slide viewed before current (0=1st slide, 1=2nd etc)
        //curindex holds index of currently shown slide (0=1st slide, 1=2nd etc)
    }
})

下一个和之前的工作正常,但我需要将下一次和之前的冻结定位到他们的位置,即前一个和下一个最后一个。我不太清楚该怎么做。

通过冻结,我的意思是以下。

目前当您按上一个或下一个时,它们会移动到1,2,3,1 ......等等。我希望它们最后被锁定。例如,如果我的页面加载为1,那么当我按下一个时,它应该是1,2,3就是它。它应该最后停止。当我从3,2,1按下之前,它应该停在1而不是3,2,1,3 ..等等。希望这有帮助

您可以通过以下jsFiddle链接查看工作演示。

WORKING DEMO

2 个答案:

答案 0 :(得分:2)

请参阅http://jsfiddle.net/4xvcuz6h/6/

if (turntopage == 1){
    document.getElementsByClassName("prev")[0].removeAttribute("href");
}
else{
    document.getElementsByClassName("prev")[0].href = "#prev";
}

if (turntopage == totalpages){
    document.getElementsByClassName("next")[0].removeAttribute("href");
}
else{
    document.getElementsByClassName("next")[0].href = "#next";
}

pdivlinks[i].onclick=function(){
   if (this.href){ //only handle when href is set
        featuredcontentslider.turnpage(setting, this.className)
        return false
   }
}

答案 1 :(得分:1)

代码中有一行说:

turntopage=(turntopage<1)? totalpages : (turntopage>totalpages)? 1 : turntopage

它检查当前的数字,如果它小于1,则将其更改为总数,如果它大于总数,则将其更改为1,因此它有点围成一圈。您可以将其更改为:

turntopage=(turntopage<1)? 1 : (turntopage>totalpages)? totalpages : turntopage

编辑:

document.querySelector('.prev').style.visibility=(turntopage == 1)? "hidden" : "visible";
document.querySelector('.next').style.visibility=(turntopage == totalpages)? "hidden" : "visible";

Updated jsfiddle DEMO