js 切换 left的增加

 

 

var itemNum = document.querySelectorAll(".content-testimonials__item");//图片

var dotNum = document.querySelectorAll(".dot");//点

var textNum = document.querySelectorAll(".content-testimonials__testimonial");//内容文字

$(".previous").click(function(){//下一个

for(var i=0;i<itemNum.length;i++){

var onLeft = itemNum[i].style.left;

var onContentLeft = textNum[i].style.left;

onLeft = onLeft.replace("%","");

onContentLeft = onContentLeft.replace("%","");

onLeft = Number(onLeft) + 33.33;

onContentLeft = Number(onContentLeft) + 100;

if(onLeft > 66.66){

onLeft = 0;

}

if(onContentLeft > 200){

onContentLeft = 0;

}

itemNum[i].style.left = onLeft +"%";

textNum[i].style.left = onContentLeft + "%";

for(var j=0;j<itemNum.length;j++){

dotNum[j].classList.remove("is-selected");

itemNum[j].classList.remove("is-selected");

textNum[j].classList.remove("is-selected");

if(itemNum[j].style.left=="33.33%"){

itemNum[j].classList.add("is-selected");

dotNum[j].classList.add("is-selected");

textNum[j].classList.add("is-selected");

}

}

}

})

$(".next").click(function(){//上一个

for(var i=0;i<itemNum.length;i++){

var onLeft = itemNum[i].style.left;

var onContentLeft = textNum[i].style.left;

onLeft = onLeft.replace("%","");

onContentLeft = onContentLeft.replace("%","");

onLeft = Number(onLeft) - 33.33;

onContentLeft = Number(onContentLeft) - 100;

if(onLeft < 0){

onLeft = 66.66;

}

if(onContentLeft < 0){

onContentLeft = 200;

}

itemNum[i].style.left = onLeft +"%";

textNum[i].style.left = onContentLeft + "%";

for(var j=0;j<itemNum.length;j++){

dotNum[j].classList.remove("is-selected");

itemNum[j].classList.remove("is-selected");

textNum[j].classList.remove("is-selected");

if(itemNum[j].style.left=="33.33%"){

itemNum[j].classList.add("is-selected");

dotNum[j].classList.add("is-selected");

textNum[j].classList.add("is-selected");

}

}

}

})

　附加：限制，只能三个，多个item还需更进一步的扩展　

转载于:https://www.cnblogs.com/html5redbird/p/11601946.html