js实现上下滑动轮播

效果图

这里展示实现的上下滑动轮播效果图。

设计思路

本部分将介绍实现上下滑动轮播的具体设计思路。

第一步：需要对所有元素添加事件。当鼠标点击右侧小图时，图片至少变亮且根据偏移值加上红框，左侧出现对应的图片。

第二步：可以进入循环计时器，复制ul里的第一项，这样可以不断地循环滑动。

第三步：当鼠标进入时，让循环滑动停止；鼠标移开时，继续循环滑动。

第四步：设置上下按钮。当第一张图片的offsetTop值为0时，下面按钮出现；当到达底部最后一个元素时，上面按钮出现，底部按钮消失；当在整个元素中间时，上下按钮都出现，并且每次点击一个按钮，图片对应地改变。

核心代码

以下是实现上下滑动轮播的核心代码：

//找到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];
    ulItem.appendChild(ulItem.children[0].cloneNode(true));
    itemtabinfo.style.transform ="translateY(" + offsetTop + "px)";
    Animate();

    for (var i = 0; i < righttBtnList.length; i++) {
        righttBtnList[i].index = i;
        righttBtnList[i].onclick = function() {
            if (checkClass(this, 'top-white')) {
                this.classList.remove("top-white");
                addWhite(this.index);
            }
            Line.style.top = ((this.index * 110 + 10) + offsetTop) + "px";
            ulItem.style.transform = "translateY(" + (-this.index * liHeight) + "px)";
            count = this.index;
        }
    }

    Item.onmouseenter=function(){
        clearTimeout(timer);
    }
    Item.onmouseleave=function(){
        Animate();
    }
    topBtn.onclick = function() {
        offsetTop += 110;
        var oldTop = parseFloat(Line.style.top);
        Line.style.top = (oldTop + 110) + "px";
        itemtabinfo.style.transform ="translateY(" + offsetTop + "px)";
        checkBtnShow();
    }
    bottomBtn.onclick = function() {
        offsetTop -= 110;
        var oldTop = parseFloat(Line.style.top);
        Line.style.top = (oldTop - 110) + "px";
        itemtabinfo.style.transform ="translateY(" + offsetTop + "px)";
        checkBtnShow();
    }
    ItemMenu.onmouseenter = function() {
        checkBtnShow();
    }
    function checkBtnShow() {
        if (offsetTop == 0) {
            bottomBtn.classList.add("showBottom");
            topBtn.classList.remove("showTop");
        } else if (offsetTop == -220) {
            topBtn.classList.add("showTop");
            bottomBtn.classList.remove("showBottom");
        } else {
            bottomBtn.classList.add("showBottom");
            topBtn.classList.add("showTop");
        }
    }
    ItemMenu.onmouseleave = function() {
        bottomBtn.classList.remove("showBottom");
        topBtn.classList.remove("showTop");
    }
    function checkClass(obj,className){
        return obj.classList.contains(className);
    }
    function addWhite(index){
        for(var i=0;i<righttBtnList.length;i++){
            if(i!=index){
                righttBtnList[i].classList.add("top-white");
            }
        }
    }
    function Animate(){
        timer=setInterval(function(){
            if (timer) clearInterval(timer);
            if(!ulItem.classList.contains("transY")){
                ulItem.classList.add("transY");
            }
            count++;
            ulItem.style.transform="translateY("+(-count*liHeight)+"px)";
            setTimeout(function(){
                if(count>=ulItem.children.length-1){
                    count=0;
                    ulItem.classList.remove("transY");
                    ulItem.style.transform="translateY(0px)";
                }
            },500)
        },speed)
    }
}

总结

本文介绍了实现上下滑动轮播的具体设计思路和核心代码，希望对大家有所帮助。