These days I am busy with my graduation design, one of the pages needs to be put on the round broadcast map, so I listen to music on the Internet to find (Chao) find (XI) Ling (AN) sense (Li), suddenly found that the round broadcast map of netease cloud music client is very good-looking, so I tried to imitate one, although it is very simple, but fortunately also took the first step.

End result:

(Why are giFs so small? 😭)

Here’s a screenshot:

I used Vue framework +less to write this rotation chart, there is a difficult point is the Angle of the left and right sides of the picture, because I am a novice, so I tinker with it for some time, I hope you don’t laugh at it

Ok, without further ado, let’s get to the point: Let’s say I have six images, float them left, and wrap them around a list, so the width of the list will be big, and then the list will have a div parent, Div is the width of a picture, and set overflow to hidden, where the position of div is relative and the position of list is absolute. Finally, adjust the left value of list to realize the display switch of pictures.

HTML template code:

Preliminary less code:

.slider {
    position: relative;
    margin: 0 auto;
    width: 468px;
    height: 200px;
    overflow: hidden;
    ul {
      position: absolute;
      padding: 0;
      width: 2808px;
      li {
        float: left;
        list-style: none;
        z-index: 3;
        img {
          width: 468px;
          border-radius: 3px; }}}}Copy the code

Once you’ve styled the middle rotation diagram, start writing the left and right images using the Perspective property and the Rotate () CSS function of the Transform.

Perspective is used to set the view where the element is viewed. Note that when an element defines the Perspective property, its children get the perspective, not the element itself, so we need to define the perspective property on the parent container of the left and right images. In addition, no browser currently supports the perspective attribute 😅, but Chrome and Safari support the alternative -webkit-Perspective attribute 😜; Then set Transform: rotate () on the left and right images to create a 2D rotation. By adjusting the Angle values of perspective and rotate, the effect of the left and right images of netease cloud music rotation can be realized.

Less code for left and right images:

.around {
    perspective: 200;
    -webkit-perspective: 200;
    cursor: pointer;
    .pre {
      position: absolute;
      height: 136px;
      top: 31px;
      left: 300px;
      border-top-left-radius: 3px;
      border-bottom-left-radius: 3px;
      transform: rotateY(7deg);
    }
    .next {
      position: absolute;
      height: 136px;
      top: 31px;
      left: 766px;
      border-top-right-radius: 3px;
      border-bottom-right-radius: 3px;
      transform: rotateY(-7deg); }}Copy the code

Finally, put a small dot under the wheel image so that the user can click to jump to the specified picture:

.pointer {
    display: flex;
    justify-content: center;
    font-size: 20px;
    line-height: 20px;
    color: gray;
    cursor: pointer;
    :first-child {
      color: orange;
    }
    li {
      margin-right: 2px; }}Copy the code

In this way, the style of the wheel broadcast graph is written, and the next step is to write JS to achieve automatic play, left and right switch and click the dot jump. The logic here is pretty simple, I won’t go into it, but I’ll focus on the two critical points, the current picture is the first picture and the last picture, and the logic of clicking to switch between the left and right pictures.

Js code:

created () {
    // Initialize the number of dots;
    this.pointer.length = 6
    // Set timer;
    setInterval((a)= > {
      this.replace(true)},3000)},methods: {
    replace (right, pointer) {
      // Each time the replace method is called, change the color of the orange dot to gray;
      this.$refs.pointer[this.index].style.color = 'gray'
      // Use the first argument passed in to determine whether to switch left or right;
      this.index = right ? this.index += 1 : this.index -= 1
      /** * int ** int (int); /** int (int); /** int (int); /** int (int); * * /
      if (pointer) this.index = pointer - 1
      // Implement the "infinite loop";
      if (this.index > 5) {
        this.index = 0
      } else if (this.index < 0) {
        this.index = 5
      }
      // Realize the left and right side of the picture loop;
      if (this.index === 0) {
        this.$refs.pre.src = this.slider[5].src
        this.$refs.next.src = this.slider[this.index + 1].src
      } else if (this.index === 5) {
        this.$refs.pre.src = this.slider[this.index - 1].src
        this.$refs.next.src = this.slider[0].src
      } else {
        this.$refs.pre.src = this.slider[this.index - 1].src
        this.$refs.next.src = this.slider[this.index + 1].src
      }
      // "color" the dots corresponding to the current image;
      this.$refs.pointer[this.index].style.color = 'orange'
      // Change the position of the list, that is, change the current display of the image;
      this.$refs.list.style.left = -(this.index * 468) + 'px'}}Copy the code

conclusion

Here, a simple version of netease round figure was finished, do still exist some deficiencies, the author also in to try to improve it, a into the front deep as the sea, we still have a long way to go, hope share with you ~ of course, if this article is a little inspiration for you, might as well point like or collection, this will be my 😊 greater power.