本文主要講述關(guān)于js實(shí)現(xiàn)上下滑動(dòng)輪播的具體代碼，希望對大家有幫助。具體內(nèi)容如下

　　一、效果圖

　　二、設(shè)計(jì)思路

　　第一步：要在經(jīng)過所有的元素讓鼠標(biāo)點(diǎn)擊右側(cè)小圖時(shí)，圖片至少變亮且根據(jù)偏移值加上紅框。點(diǎn)擊右邊的小圖左邊出現(xiàn)對用的圖片。

　　第二步：也可以進(jìn)入循環(huán)計(jì)時(shí)器，復(fù)制ul里面的第一個(gè)元素這樣可以不斷的連續(xù)循環(huán)滑動(dòng)。

　　第三步：當(dāng)鼠標(biāo)進(jìn)入時(shí)讓循環(huán)滑動(dòng)停止，鼠標(biāo)移動(dòng)開時(shí)繼續(xù)。

　　第四步：設(shè)置上下按鈕，當(dāng)?shù)谝粡垐D片的offsetTop值為0時(shí)，下面按鈕出現(xiàn)，當(dāng)?shù)竭_(dá)底部最后一個(gè)元素時(shí)，上面按鈕出現(xiàn)，底部按鈕消失，當(dāng)在整個(gè)元素中間時(shí)，上下按鈕都出現(xiàn)，每點(diǎn)擊一次按鈕移動(dòng)一個(gè)格子，左邊圖片也對應(yīng)改變。

　　三、核心代碼

　　//找到right-btn 元素添加事件
　　var righttBtnList;
　　var Line;
　　var transy = 0;
　　var liHeight = 430;
　　var ulItem;
　　var count = 0;
　　var timer;
　　var speed = 2000;
　　var Item;
　　var ItemMenu;
　　var offsetTop = 0;
　　var itemtabinfo, topBtn, bottomBtn;
　　window.onload = function () {
　　righttBtnList = document.getElementsByClassName("right-btn");
　　Line = document.getElementsByClassName("line")[0];
　　ulItem = document.getElementsByClassName("item-child-ul")[0];
　　Item = document.getElementsByClassName("item-list")[0];
　　ItemMenu = document.getElementsByClassName("item-menu")[0];
　　itemtabinfo = document.getElementsByClassName("item-tab-info")[0];
　　topBtn = document.getElementsByClassName("top-btn")[0];
　　bottomBtn = document.getElementsByClassName("bottom-btn")[0];
　　//默認(rèn)復(fù)制第一張?zhí)砑拥絬lItem之中
　　ulItem.appendChild(ulItem.children[0].cloneNode(true));
　　//設(shè)置itemtabinfo 默認(rèn)移動(dòng)值
　　itemtabinfo.style.transform = "translateY(" + offsetTop + "px)";
　　//直接默認(rèn)啟動(dòng)計(jì)時(shí)器
　　Animate();
　　//遍歷所有的li添加事件
　　for (var i = 0; i < righttBtnList.length; i++) {
　　righttBtnList[i].index = i;
　　righttBtnList[i].onclick = function () {
　　//點(diǎn)擊當(dāng)前移除top-white
　　if (checkClass(this, 'top-white')) {
　　this.classList.remove("top-white");
　　//其余的添加
　　addWhite(this.index);
　　}
　　//獲取偏移值
　　Line.style.top = ((this.index * 110 + 10) + offsetTop) + "px";
　　//輸出當(dāng)前點(diǎn)擊的索引
　　ulItem.style.transform = "translateY(" + (-this.index * liHeight) + "px)";
　　//用戶點(diǎn)擊的索引 對應(yīng)count值
　　count = this.index;
　　}
　　}
　　Item.onmouseenter=function(){
　　clearTimeout(timer);
　　}
　　Item.onmouseleave=function(){
　　Animate();
　　}
　　topBtn.onclick = function () {
　　offsetTop += 110;
　　//獲取原來的top
　　var oldTop = parseFloat(Line.style.top);
　　Line.style.top = (oldTop + 110) + "px";
　　itemtabinfo.style.transform = "translateY(" + offsetTop + "px)";
　　checkBtnShow();
　　}
　　bottomBtn.onclick = function () {
　　offsetTop -= 110;
　　//獲取原來的top
　　var oldTop = parseFloat(Line.style.top);
　　//只能取到行內(nèi)樣式
　　Line.style.top = (oldTop - 110) + "px";
　　itemtabinfo.style.transform = "translateY(" + offsetTop + "px)";
　　checkBtnShow();
　　}
　　ItemMenu.onmouseenter = function () {
　　checkBtnShow();
　　}
　　function checkBtnShow() {
　　if (offsetTop == 0) {
　　//下面按鈕出現(xiàn)
　　bottomBtn.classList.add("showBottom");
　　topBtn.classList.remove("showTop");
　　}
　　else if (offsetTop == -220) {
　　//上面按鈕出現(xiàn)
　　topBtn.classList.add("showTop");
　　bottomBtn.classList.remove("showBottom");
　　} else {
　　//兩個(gè)按鈕同時(shí)出現(xiàn)
　　bottomBtn.classList.add("showBottom");
　　topBtn.classList.add("showTop");
　　}
　　}
　　ItemMenu.onmouseleave = function () {
　　bottomBtn.classList.remove("showBottom");
　　topBtn.classList.remove("showTop");
　　}
　　//檢測是否具有top-white
　　function checkClass(obj,className){
　　return obj.classList.contains(className);
　　}
　　//其余的li添加
　　function addWhite(index){
　　for(var i=0;i<righttBtnList.length;i++){
　　if(i!=index){
　　righttBtnList[i].classList.add("top-white");
　　}
　　}
　　}
　　//啟動(dòng)計(jì)時(shí)器動(dòng)畫
　　function Animate(){
　　//寫執(zhí)行代碼
　　timer=setInterval(function(){
　　if (timer)
　　clearInterval(timer);
　　if(!ulItem.classList.contains("transY")){
　　ulItem.classList.add("transY");
　　}
　　count++;
　　ulItem.style.transform="translateY("+(-count*liHeight)+"px)";
　　//找出當(dāng)前每一張圖動(dòng)畫完成時(shí)間
　　setTimeout(function(){
　　if(count>=ulItem.children.length-1){
　　count=0;
　　//移除過渡類
　　ulItem.classList.remove("transY");
　　ulItem.style.transform="translateY(0px)";
　　}
　　//讓右邊的元素動(dòng)畫對應(yīng)
　　//rigthBtnlist[count].click();
　　},500)
　　},speed)
　　}
　　}

　　上面是全部代碼內(nèi)容，歡迎大家多多關(guān)注。