On the first code

I used to write in DOM, but I changed it to Vue and changed it to ref

The overall effect is achieved by changing the margin to show the style of the image switch

<template> <div class="imgs"> <div class="img" style="" v-for="(e, i) in imgUrl" :key="i"> <img :src="e" /> </div> <div class="img"> <img :src="imgUrl[0]" /> </div> <div class="btn-left" @click="btn_left"></div> <div class="btn-right" @click="btn_right"></div> <ul> <li @click="bt(i)" v-for="(e,i) in 6" :key="i"></li> </ul> </div> </template> <script> export default { data() { return { r: true, ind: 0, imgs: document.getElementsByClassName("img"), }; }, props: ["imgUrl"], methods: { bt(e) { if (e ! == this.ind) { if (e > this.ind) { let o = e - this.ind; console.log(o) for (let i = 0; i < o; i++) { this.imgs[this.ind].style.transition = ".5s"; this.imgs[this.ind].style.marginLeft = "-500px"; this.ind++; } } if (e < this.ind) { console.log('object') let o = this.ind - e; for (let i = 0; i < o; i++) { this.imgs[this.ind - 1].style.transition = ".5s"; this.imgs[this.ind - 1].style.marginLeft = "0"; this.ind--; } } } }, btn_left() { if (this.r) { this.r = false; setTimeout(() => { this.r = true; }, 1000); if (this.ind === 0) { for (let i = 0; i < this.imgs.length - 1; i++) { this.imgs[i].style.transition = "none"; this.imgs[i].style.marginLeft = "-500px"; } this.ind = this.imgs.length - 1; setTimeout(() => { this.imgs[this.ind - 1].style.transition = ".5s"; this.imgs[this.ind - 1].style.marginLeft = "0"; this.ind--; }, 100); } else { this.imgs[this.ind - 1].style.transition = ".5s"; this.imgs[this.ind - 1].style.marginLeft = "0"; this.ind--; } } }, btn_right() { if (this.r) { this.r = false; setTimeout(() => { this.r = true; }, 1000); this.imgs[this.ind].style.transition = ".5s"; this.imgs[this.ind].style.marginLeft = "-500px"; this.ind++; if (this.ind == this.imgs.length - 1) { setTimeout(() => { for (let i = 0; i < this.ind; i++) { this.imgs[i].style.transition = "none"; this.imgs[i].style.marginLeft = "0px"; } this.ind = 0; }, 600); } } }, }, computed: {}, }; </script> <style scoped> ul { display: flex; position: absolute; bottom: 0; width: 100%; flex-direction: row; justify-content: center; } li { z-index: 101; width: 20px; font-size: 40px; } img { width: 500px; height: 300px; } .imgs { height: 300px; position: relative; margin: 0 auto; overflow: hidden; display: flex; flex-direction: row; width: 500px; } .btn-left { position: absolute; top: 50%; left: 10px; border: 10px solid transparent; border-right: 20px solid #f00; width: 0; height: 0px; } .btn-right { position: absolute; top: 50%; right: 10px; border: 10px solid transparent; border-left: 20px solid #f00; width: 0; height: 0px; } </style>Copy the code

Element part

Imgs: indicates the parent node

Img: Each image

Btn_left: left button

Btn_right: button on the right

Ul > li: small dots, which can be set to imgurl.length

You need to put one more image in the style to make the last image seamless

<div class="imgs">
    <div class="img" style v-for="(e, i) in imgUrl" :key="i">
        <img :src="e" />
    </div>
 	 <div class="img">
            <img :src="imgUrl[0]" />
        </div>
    <div class="btn-left" @click="btn_left"></div>
    <div class="btn-right" @click="btn_right"></div>
    <ul>
        <li @click="bt(i)" v-for="(e,i) in 6" :key="i"></li>
    </ul>
</div>
Copy the code

The overall style is relatively positioned, with a fixed width overflow: Hidden

ul {
    display: flex;
    position: absolute;
    bottom: 0;
    width: 100%;
    flex-direction: row;
    justify-content: center;
}
li {
    z-index: 101;
    width: 20px;
    font-size: 40px;
}
img {
    width: 500px;
    height: 300px;
}
.imgs {
    height: 300px;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    width: 500px;
}
.btn-left {
    position: absolute;
    top: 50%;
    left: 10px;
    border: 10px solid transparent;
    border-right: 20px solid #f00;
    width: 0;
    height: 0px;
}
.btn-right {
    position: absolute;
    top: 50%;
    right: 10px;
    border: 10px solid transparent;
    border-left: 20px solid #f00;
    width: 0;
    height: 0px;
}
Copy the code

Js implementation

variable

Ind: is the subscript of the current picture

Imgs: node to obtain all images

R: throttle switch

ImgUrl: is the address of the image passed in

methods

Bt () : Dots pass in different values to determine which chapter image to switch to.

Btn_left () : To switch to the left, you need to know if it is the first image, if it is the first image, then turn off the animation, switch to the last image first, then turn on the animation, switch from the last image to the penultimate image.

Btn_rigth () : When switching to the right, only need to determine if it is the last chapter, if it is the last chapter, it is similar to the implementation of switching to the left last page.

The two click buttons need to be throttled to prevent the user from clicking multiple times and leaving the last image blank.

Each time you click the two buttons to the right you need to ind++ to the left in order to determine what chapter the current image is.

Because the last image is the same as the first, the way to do this is to pause the animation and go back from the last image to the first image.

The switch is so fast that the user can’t see the effect and complete it.

Quick toggling is done using the for loop, which zeros each image by adding marginLeft and marginLeft, and uses leng-1 because there is already one more image for the toggling.

Dot is to judge and the current position of a few pieces, on the cycle of several times to add.

export default {
    data() {
        return {
            r: true.ind: 0.imgs: document.getElementsByClassName("img"),}; },props: ["imgUrl"].methods: {
        bt(e) {
            if(e ! = =this.ind) {
                if (e > this.ind) {
                    let o = e - this.ind;
                    console.log(o)
                    for (let i = 0; i < o; i++) {
                        this.imgs[this.ind].style.transition = ".5s";
                        this.imgs[this.ind].style.marginLeft = "-500px";
                        this.ind++; }}if (e < this.ind) {
                    console.log('object')
                    let o = this.ind - e;

                    for (let i = 0; i < o; i++) {
                        this.imgs[this.ind - 1].style.transition = ".5s";
                        this.imgs[this.ind - 1].style.marginLeft = "0";
                        this.ind--; }}}},btn_left() {
            if (this.r) {
                this.r = false;
                setTimeout(() = > {
                    this.r = true;
                }, 1000);
                if (this.ind === 0) {
                    for (let i = 0; i < this.imgs.length - 1; i++) {
                        this.imgs[i].style.transition = "none";
                        this.imgs[i].style.marginLeft = "-500px";
                    }
                    this.ind = this.imgs.length - 1;
                    setTimeout(() = > {
                        this.imgs[this.ind - 1].style.transition = ".5s";
                        this.imgs[this.ind - 1].style.marginLeft = "0";
                        this.ind--;
                    }, 100);
                } else {
                    this.imgs[this.ind - 1].style.transition = ".5s";
                    this.imgs[this.ind - 1].style.marginLeft = "0";
                    this.ind--; }}},btn_right() {
            if (this.r) {
                this.r = false;
                setTimeout(() = > {
                    this.r = true;
                }, 1000);
                this.imgs[this.ind].style.transition = ".5s";
                this.imgs[this.ind].style.marginLeft = "-500px";
                this.ind++;
                if (this.ind == this.imgs.length - 1) {
                    setTimeout(() = > {
                        for (let i = 0; i < this.ind; i++) {
                            this.imgs[i].style.transition = "none";
                            this.imgs[i].style.marginLeft = "0px";
                        }
                        this.ind = 0;
                    }, 600); }}},},};Copy the code

There is another way to realize the rotation diagram, through the viewport of a single picture, and then all the pictures together into a back and forth, but the realization of the last picture is very similar, are achieved by turning off the animation time.

Don’t spray if you don’t like it.