在vue脚手架中,学习实现一个轮播图(2-旋转木马)

目录

效果展示:

index.html:

template:

data:

methods:

mounted():

style:


效果展示:

轮播图(旋转木马)

在vue脚手架中,学习实现一个轮播图(2-旋转木马)_第1张图片

在vue脚手架中,学习实现一个轮播图(2-旋转木马)_第2张图片

index.html:

    

template:

data:

        图片素材来自网络!

        return{
            images:[
                {src:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fss2.meipian.me%2Fusers%2F120470823%2F80cf36c23f744bdf992abb21619714dc.jpeg%3Fmeipian-raw%2Fbucket%2Fivwen%2Fkey%2FdXNlcnMvMTIwNDcwODIzLzgwY2YzNmMyM2Y3NDRiZGY5OTJhYmIyMTYxOTcxNGRjLmpwZWc%3D%2Fsign%2F41e170ae81aa27e57d5687de957d9609.jpg&refer=http%3A%2F%2Fss2.meipian.me&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663387064&t=71853af48512807d15ee43cb3a41737a",alt:"滕王阁",id:"aaa"},
                {src:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn%2F20170411%2F77c8-fyeceza2014459.jpg&refer=http%3A%2F%2Fn.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663387194&t=763a6f4f2f6f61606b802285fb955be8",alt:"岳阳楼",id:"bbb"},
                {src:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fnews.cnhubei.com%2Fa%2F10001%2F202202%2F536db75fa423794d829cb72eec0a0699.jpeg&refer=http%3A%2F%2Fnews.cnhubei.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663387251&t=6a8b11f5a2c0447014185710b623a302",alt:"黄鹤楼",id:"ccc"},
                {src:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fss2.meipian.me%2Fusers%2F5738464%2F2ff02d9e5837e9702d35886742752e0f.jpg%3Fmeipian-raw%2Fbucket%2Fivwen%2Fkey%2FdXNlcnMvNTczODQ2NC8yZmYwMmQ5ZTU4MzdlOTcwMmQzNTg4Njc0Mjc1MmUwZi5qcGc%3D%2Fsign%2Fe2a10a52c511e52abe6fb5006bcc78fe.jpg&refer=http%3A%2F%2Fss2.meipian.me&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663387424&t=420622e9f16446deee38b3171f123ea3",alt:"鹤雀楼",id:"ddd"},
                {src:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20180809%2F941e123006494773931d546abc5b57b3.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663387463&t=490048000ebfcda3a1b904271d9ab81d",alt:"蓬莱阁",id:"eee"},
            ],
            tipIndex:1,                 // 0-4 用于更新底部圆点  共 5个真实 li
            isChanging:false,           // 是否正在变换
            userChanging:false,         // 是否是用户触发的变换
        }

methods:

        moving(direction){              //控制ul移动的方法 1为 ul左移,-1为 ul右移
            if(direction != 1 && direction != -1){
                return;
            }
            this.isChanging = true;                     // “ 封闭式执行任务,新的任务不能打扰 ,不接新任务”
            if(direction === 1){
                if(this.tipIndex === 6){                //一个循环之后恢复初始化,即只有下标为 1 的li处于放大状态
                    this.tipIndex = 1;
                    this.adjust(this.tipIndex, 6, 0);
                }
                new Promise((res,rej)=>res(this.moveLeft())).then(val => this.tipIndex++);
            }else{
                if(this.tipIndex === 1){                // 先把ul整体瞬移到 以下标为6的li位于中间的位置 再进行右移
                    this.adjust(6, this.tipIndex, -1600);
                }
                new Promise((res,rej)=>res(this.moveRight())).then(val => {
                    if( -- this.tipIndex < 0){
                        this.tipIndex = 4;
                    }
                })
            }
        },
        moveLeft(){                     // ul 向左移动
            let index = this.tipIndex;
            //切换底部圆点
            this.$refs.circle[index%5].style.background="hsl(0,0%,90%)";
            this.$refs.circle[(index+1)%5].style.background='hsl(0,0%,60%)';
            let element = this.getEle('li');
            element[index+1].style.zIndex='10';
            element[index].style.zIndex='0';
            //切换图片 t为变换次数 共32次,每隔10毫秒变换一次,依照宽度来改变,每次左移32px,320ms后移动一个li的距离
            let t = 0;
            let moveLeft = setInterval(()=>{
                //整体移动ul
                this.getEle('ul')[0].style.left = Number.parseInt(this.getEle('ul')[0].style.left) - 10 + 'px';
                //下一个li放大,变清晰
                element[index+1].style.transform=`scale(${1 + 0.5 / 32 * t})`;
                element[index+1].style.opacity=`${0.36 + t * 0.02}`;
                //当前li缩小,变模糊
                element[index].style.transform=`scale(${1.5 - 0.5 / 32 * t})`;
                element[index].style.opacity=`${1 - t * 0.02}`;
                t++;
                if(t >= 32){        //运动一个li默认的宽度之后停止定时任务
                    if(this.userChanging){
                        this.userChanging = false;
                        window.timer = this.defaultTimer();
                    }
                    this.isChanging = false;
                    clearInterval(moveLeft);
                }
            },10);
        },
        moveRight(){                    // ul 向右移动
            let index = this.tipIndex;  //用this.tipIndex来更新圆点,用index来更新ul、li
            if(index === 1){
                index = 6;
            }else if(index === 0){
                index = 5;
            }

            this.$refs.circle[this.tipIndex % 5].style.background="hsl(0,0%,90%)";
            this.$refs.circle[(this.tipIndex - 1 < 0) ? 4 : (this.tipIndex - 1)].style.background='hsl(0,0%,60%)';
            let element = this.getEle('li');
            element[index-1].style.zIndex='10';
            element[index].style.zIndex='0';
            //切换图片 t为变换次数 共32次,每隔10毫秒变换一次,依照宽度来改变,每次右移32px,320ms后移动一个li的距离
            let t = 0;
            let moveright = setInterval(()=>{
                //整体移动ul
                this.getEle('ul')[0].style.left = Number.parseInt(this.getEle('ul')[0].style.left) + 10 + 'px';
                //上一个li放大,变清晰
                element[index-1].style.transform=`scale(${1 + 0.5 / 32 * t})`;
                element[index-1].style.opacity=`${0.36 + t * 0.02}`;
                //当前li缩小,变模糊
                element[index].style.transform=`scale(${1.5 - 0.5 / 32 * t})`;
                element[index].style.opacity=`${1 - t * 0.02}`;
                t++;
                if(t >= 32){        //运动一个li默认的宽度之后停止定时任务
                    this.isChanging = false;
                    if(this.userChanging){
                        this.userChanging = false;
                        window.timer = this.defaultTimer();
                    }
                    clearInterval(moveright);
                }
            },10);
        },
        adjust(largeIndex, smallIndex, left){
            let element = this.getEle('li');
            element[largeIndex].style.transform='scale(1.5)';
            element[largeIndex].style.opacity='1';
            element[largeIndex].style.zIndex='10';
            element[smallIndex].style.transform=`scale(1)`;          
            element[smallIndex].style.opacity=`0.36`;
            element[smallIndex].style.zIndex='0';
            this.getEle('ul')[0].style.left = left + 'px';
        },
        getEle(name){                   //封装一个操作dom的函数
            return document.getElementsByTagName(name);
        },
        // 调用这个函数用来给 window 添加一个 默认的定时器,
        // 只有在用户主动点击切换的时候这个定时器被清除,但执行完用户的切换后又将立马加上
        defaultTimer(){                 
            return setInterval(()=>{
                this.moving(1);      // 参数1 是默认向左整体移动ul  即将当前li缩小,下一个li放大
            },3500);
        },
        user_move(val){
            // 如果当前 window.timer 定时器正在进行切换动作 或者 用户此前点击的切换事件正在执行,则不在执行用户此次的动作
            if(this.isChanging || this.userChanging){       
                return;
            }
            clearInterval(window.timer);            // 先清除默认的定时器
            this.userChanging = true;               // 设置用户主动进行的切换动作正在执行
            this.moving(val);                       // 预执行
        }

mounted():

        //监视浏览器窗口的改变,当浏览器窗口最小化时,将默认定时器停掉,当浏览器可视时,再开启
        document.addEventListener('visibilitychange',()=>{          
            if(document.visibilityState === 'hidden'){
                clearInterval(window.timer);
            }else if(document.visibilityState === 'visible'){
                window.timer = this.defaultTimer();
            }
        })

        for(let i=0; i<3; i++){         //深克隆最前面四个li放在ul的后面
            let templi=this.getEle('li')[i].cloneNode(true);
            this.getEle('ul')[0].appendChild(templi);
        }

        let element = this.getEle('li');
        //初始化构造,将索引为 1 的li放大,变清晰
        element[this.tipIndex].style.transform='scale(1.5)';
        element[this.tipIndex].style.opacity='1';
        element[this.tipIndex].style.zIndex='10';
        this.$refs.circle[this.tipIndex].style.background='hsl(0,0%,60%)';
        // 全局默认定时器
        window.timer = this.defaultTimer();

style:

.outest{
    --custom-width:960px;
    --custom-height:400px;
    --custom-img-number:5;
    width: var(--custom-width);
    height: var(--custom-height);
    border-radius: 0.5rem;
    border: 1px solid hsl(0, 0%, 75%);
    position: relative;
}
.content{
    width:calc(var(--custom-width) * --custom-img-number);
    height: var(--custom-height);
    padding: 0;
    margin: 0;
    position: absolute;
    display: flex;
}
.content > li{
    width: calc(var(--custom-width) / 3);
    list-style: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background:hsl(0,0%,90%);
}
.picture{
    width: 100%;
    height: calc(var(--custom-height) / 2);
    margin-bottom: 0.5em;
}
.text{
    font-size: 1.3rem;
    font-weight: 800;
    text-align: center;
}

/** 向左向右按键 */
.before-ul,.after-ul{
    font-size: 1.5rem;
    font-weight: 900;
    padding: 0.3rem;
    background: hsl(0 ,0% ,80%) ;
    opacity: 0.4;
    z-index: 20;
    position: absolute;
    top: 50%;
    transform: translate(0,-50%) scaleY(2);
}
.before-ul{
    left:0px;
    border-top-right-radius: 0.3rem;
    border-bottom-right-radius: 0.3rem;
}
.after-ul{
    right: 0px;
    border-top-left-radius: 0.3rem;
    border-bottom-left-radius: 0.3rem;
}
.before-ul:active{
    color: hsl(0,90%,40%);
    box-shadow: 0.5px 0.5px;
}
.after-ul:active{
    color: hsl(0,90%,40%);
    box-shadow: 0.5px 0.5px;
}
.before-ul:hover{
    cursor: pointer;
    opacity: 1;
    font-weight: bolder;
}
.after-ul:hover{
    cursor: pointer;
    opacity: 1;
    font-weight: bolder;
}

/**底部小圆圈 */
.sub-circle{
    position: absolute;
    left: 3%;
    bottom: 20px;
    display: flex;
    justify-content: space-around;
    padding: 0px;
    margin: 0px;
    z-index: 100;
}
.sub-circle > li{
    list-style: none;
    padding: 0.5rem;
    margin: 0.1rem;
    border-radius: 180px;
    background: hsl(0, 0%, 90%);
}

你可能感兴趣的:(Vue.js,CSS,vue.js,前端,javascript)