preface

In JS often have the realization of the effect of the wheel cast, its implementation is very simple, need to know the trigger of the click event, as well as the operation of the Element attribute method can achieve the effect of the wheel cast oh! There are usually two simple and common round seeding methods. Without further ado, let’s get to the question.

Topics in this paper, the

The user can change the background of the image by clicking.

• The first: the middle column of the rotation

1. The user clicks a similar numbered button in the middle of the image,
2. The background will switch to the corresponding background image and light up the similar button after the current click.
3. When the next button is clicked, the background image switches, and the current similar button lights up, while other similar buttons resume.

• Second: left and right sides of the round seeding

1. The user clicks a similar button on the left or right side of the image,
2. The background will background the images in sequence,
3. And if you go to the first one, you start from the last one,
4. If the right end switches to the last slide, it starts from the first slide again.

Implementation approach

The first: the middle column of the rotation

1. First get the length of the image address array, which determines how many similar buttons to create (the number of buttons can also be fixed).
2. Then bind click events to each virtual button,
3. The content of the click event is to change the address of the current background image, which is determined by the subscript of the click button.
4. For example: click the first virtual button, display the first picture; Click on the second one to display the second one…

Code sample

        var imgArr = ["pic0.jpg"."pic1.jpg"."pic2.jpg"."pic3.jpg"];
        // Generate a multicast button. The number of buttons is determined by the length of the image array
        var fn0 = (leng) = > {
            var ul = document.querySelector("ul");
            // Create as many Li's as there are images
            for (i = 0; i < leng; i++) {
                var li = document.createElement("li");
                li.innerHTML = i + 1;
                ul.appendChild(li);
            }
        }
        fn0(imgArr.length);
        // The middle column of the wheel event trigger function
        var fn1 = () = > {
            var img = document.querySelector("img");
            var lis = document.querySelectorAll("ul>li");
            for (var i = 0; i < lis.length; i++) {
                lis[i].onclick = function () {
                    // Idea 1: Modify the CSS properties
                    for (var v of lis) {
                        v.style.backgroundColor = "# 000000";
                    }
                    this.style.backgroundColor = "pink";
                    img.src = "./images/" + imgArr[this.innerHTML - 1];

                    // Add or remove a class
                    // for (var v of lis) {
                    // v.classList.remove("blue");
                    // }
                    // this.classList.add("blue");
                    // img.src = imgArr[this.innerHTML - 1];
                }
            }
        }
        fn1();
Copy the code

Second: left and right sides of the round seeding

1. Get the index of the current image address in the array,
2. Get the similar button elements on the left and right,
3. Bind click events to similar button elements on the left/right,
4. Click events to do:
   • Every time you click a similar button on the left, the picture index value decreases by one. If you switch to the first slide, make the index equal to the index of the last slide;
   • Conversely, click a similar button on the right once, the image index value increases by one; Switch to the last slide and make the index equal to the index of the first slide.

Code sample

 // The left and right side of the wheel event trigger function
       var fn2 = () = > {
           var left = document.querySelector(".left");
           var right = document.querySelector(".right");
           var img = document.querySelector("img");
           // Get the current image position subscript
           var index = img.src.split("/");
           index = index[index.length - 1];
           index = imgArr.indexOf(index);

           left.onclick = function () {
               if (index == 0) {
                   index = imgArr.length;
               }
               index -= 1;
               img.src = "./images/" + imgArr[index];
           }
           right.onclick = function () {
               if (index == imgArr.length - 1) {
                   index = -1;
               }
               index += 1;
               img.src = "./images/" + imgArr[index];
           }
       }
       fn2()
Copy the code

conclusion

Of course, this is only a rough implementation of the effect of rotation; To achieve the dazzling round seeding effect, can reasonably use the delay device, to achieve automatic playback; Adding transparency, increasing fit, etc., implementing functionality is the most important first step.