[已解决]JavaScript特效思路

年少的梦想

万能的鱼油啊，帮忙想一下，这个轮播图的实现思路，点击下一张，想要有右划的效果，但又不知道，应该改变那个属性，

最佳答案

月排行榜 / 总排行榜

yuesezhenmei

2020-12-10 19:14:47

用定位 更新left属性

跳转到最佳答案楼层

yuesezhenmei

用定位 更新left属性

yuesezhenmei

他还用了transform属性，使图片有层级的现象

yuesezhenmei

送你一个自己写的3D轮播图每个图片由10个小块组成，会自动旋转不同角度形成新的图片，地址自己换，Scss的变量我开出来了，自己改大小，写成Vue组件模式了，直接加到你项目即可
<template>
    <div class="bzgf">  
        <img :src="bzgf" alt="" class="bzgf_bg" />
        <div class="swipe" ref="swipe" @mouseover="timeend" @mouseout="timestart">
            <span class="swipe_item_father" v-for="(itemf,indexf) in 10" :key="indexf">
                <span class="swipe_item_child" v-for="(itemc,indexc) in 4" :key="indexc"></span>
            </span>
            <img :src="btn" alt="" class="left_btn" @click="swipebefore">
            <img :src="btn" alt="" class="right_btn" @click="swipeafter">
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            id:0,
            bzgf: "http://127.0.0.1/assets/test.jpg",
            swieptime:'',
            btn:"http://127.0.0.1/assets/arrow.png",
            img:[
                "http://127.0.0.1/assets/bzgf_one.png",
                "http://127.0.0.1/assets/bzgf_two.png",
                "http://127.0.0.1/assets/bzgf_three.png",
                "http://127.0.0.1/assets/bzgf_four.png"
            ]
        }
    },
    methods:{
        swipechange(){
            let fatheritems=document.getElementsByClassName('swipe_item_father');
            for(let i=0;i<fatheritems.length;i++)
            {
                if(i<5)
                {
                    fatheritems[i].children[0].style.backgroundImage='url('+this.img[0]+')';
                    fatheritems[i].children[1].style.backgroundImage='url('+this.img[1]+')';
                    fatheritems[i].children[2].style.backgroundImage='url('+this.img[2]+')';
                    fatheritems[i].children[3].style.backgroundImage='url('+this.img[3]+')';
                }
                else {
                    fatheritems[i].children[0].style.backgroundImage='url('+this.img[0]+')';
                    fatheritems[i].children[3].style.backgroundImage='url('+this.img[1]+')';
                    fatheritems[i].children[2].style.backgroundImage='url('+this.img[2]+')';
                    fatheritems[i].children[1].style.backgroundImage='url('+this.img[3]+')';
                }
               
            }
            this.swieptime=setInterval(() => {
                this.id++;
                for(let i=0;i<fatheritems.length;i++)
                {
                    if(i<5)
                    {
                        fatheritems[i].style.transform='rotateX('+-90*this.id+'deg)'
                    }
                    else {
                        fatheritems[i].style.transform='rotateX('+90*this.id+'deg)'
                    }
                }
            }, 8000);
        },
        swipebefore(){
            let fatheritems=document.getElementsByClassName('swipe_item_father');
            this.id--;
            for(let i=0;i<fatheritems.length;i++)
            {
                if(i<5)
                {
                    fatheritems[i].style.transform='rotateX('+-90*this.id+'deg)'
                }
                else {
                    fatheritems[i].style.transform='rotateX('+90*this.id+'deg)'
                }
            }
        },
        swipeafter(){
            let fatheritems=document.getElementsByClassName('swipe_item_father');
            this.id++;
            for(let i=0;i<fatheritems.length;i++)
            {
                if(i<5)
                {
                    fatheritems[i].style.transform='rotateX('+-90*this.id+'deg)'
                }
                else {
                    fatheritems[i].style.transform='rotateX('+90*this.id+'deg)'
                }
            }
        },
        timestart(){
            let fatheritems=document.getElementsByClassName('swipe_item_father');
            clearInterval(this.swieptime);
            this.swieptime=setInterval(() => {
                this.id++;
                for(let i=0;i<fatheritems.length;i++)
                {
                    if(i<5)
                    {
                        fatheritems[i].style.transform='rotateX('+-90*this.id+'deg)'
                    }
                    else {
                        fatheritems[i].style.transform='rotateX('+90*this.id+'deg)'
                    }
                }
            }, 8000);
        },
        timeend(){
            clearInterval(this.swieptime);
        }
    },
    mounted(){
        this.swipechange();
    },
    beforeDestroy(){
        clearInterval(this.swieptime);
    }
}
</script>

<style lang="scss" scoped>
    $width:1000px;  //轮播宽度
    $height:480px;  //轮播高度
    $fwidth:200px;  //轮播每个小块的宽度
    $theight:240px; //轮播每个小块的高度
    $top:-240px;    //轮播第二行小块的top值
    $fheight:120px; //轮播小块翻转的高度
    $lefttwo:200px; //轮播第二列的left值
    $leftthree:400px; //轮播第三列的left值
    $leftfour:600px;  //轮播第四列的left值
    $leftfive:800px;  //轮播第五列的left值
    .bzgf {
        .bzgf_bg {
            position: fixed;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
        }
        .swipe {
            position: absolute;
            width: $width;   
            height: $height;  
            left: 140px;
            top: 100px;
            .swipe_item_father {
                position: absolute;
                width: $fwidth;
                height: $theight;
                transform-style: preserve-3d;
                transform: rotateX(0deg);
                .swipe_item_child {
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    background-size: $width $height;
                    background-repeat: no-repeat;
                    overflow: hidden;
                    &:nth-child(1) {
                        transform: rotateX(0deg) translateZ($fheight);
                    }
                    &:nth-child(2) {
                        transform: rotateX(-90deg) translateZ($fheight);
                    }
                    &:nth-child(3) {
                        transform: rotateX(-180deg) translateZ($fheight);
                    }
                    &:nth-child(4) {
                        transform: rotateX(-270deg) translateZ($fheight);
                    }
                }
                &:nth-child(1) {
                    left: 0px;
                    top: 0;
                    transition: all 1.6s 0s;
                    .swipe_item_child {
                        background-position: 0px 0px;
                    }
                }
                &:nth-child(2) {
                    left: $lefttwo;
                    top: 0;
                    transition: all 1.6s .2s;
                    .swipe_item_child {
                        background-position: -$lefttwo 0px;
                    }
                }
                &:nth-child(3) {
                    left: $leftthree;
                    top: 0;
                    transition: all 1.6s .4s;
                    .swipe_item_child {
                        background-position: -$leftthree 0px;
                    }
                }
                &:nth-child(4) {
                    left: $leftfour;
                    top: 0;
                    transition: all 1.6s .6s;
                    .swipe_item_child {
                        background-position: -$leftfour 0px;
                    }
                }
                &:nth-child(5) {
                    left: $leftfive;
                    top: 0;
                    transition: all 1.6s .8s;
                    .swipe_item_child {
                        background-position: -$leftfive 0px;
                    }
                }
                &:nth-child(6) {
                    left: 0px;
                    top: $theight;
                    transition: all 1.6s .8s;
                    .swipe_item_child {
                        background-position: 0px $top;
                    }
                }
                &:nth-child(7) {
                    left: $lefttwo;
                    top: $theight;
                    transition: all 1.6s .6s;
                    .swipe_item_child {
                        background-position: -$lefttwo $top;
                    }
                }
                &:nth-child(8) {
                    left: $leftthree;
                    top: $theight;
                    transition: all 1.6s .4s;
                    .swipe_item_child {
                        background-position: -$leftthree $top;
                    }
                }
                &:nth-child(9) {
                    left: $leftfour;
                    top: $theight;
                    transition: all 1.6s .2s;
                    .swipe_item_child {
                        background-position: -$leftfour $top;
                    }
                }
                &:nth-child(10) {
                    left: $leftfive;
                    top: $theight;
                    transition: all 1.6s 0s;
                    .swipe_item_child {
                        background-position: -$leftfive $top;
                    }
                }
            }
            .left_btn {
                position: absolute;
                width: 45px;
                height: 45px;
                border-radius: 50%;
                top: 0;
                bottom: 0;
                margin: auto;
                left: 30px;
                transition: all .3s;
                transform: rotate(180deg);
                opacity: 0.5;
                cursor: pointer;
                &:hover {
                    opacity: 1;
                }
            }
            .right_btn {
                position: absolute;
                width: 45px;
                height: 45px;
                border-radius: 50%;
                top: 0;
                bottom: 0;
                margin: auto;
                right: 30px;
                transition: all .3s;
                opacity: 0.5;
                cursor: pointer;
                &:hover {
                    opacity: 1;
                }
            }
        }
    }
</style>

年少的梦想

yuesezhenmei 发表于 2020-12-10 19:14
用定位 更新left属性

你好, 想问一下, 我每次在写这些js特效的时候, 就无处下手, 应该怎么改变呢

yuesezhenmei

多练，从最基础的开始，量变才能质变，多找优秀网站，我学前端3年，还感觉自己很多不会
有问题的话加我qq：1346502061
h5，c3，Scss,js,ts,Vue,webpack,Electron,nodejs,MongoDb,不会的可以问我