Display interface & Github source code

  • Github source code (contains two ways to achieve the source of the wheel cast graph)
  • Project preview

preface

  • How to use native JS to implement a simple wheel cast graph? In front I have used a method to achieve, may be some partners feel that method to write a little low, not cool. So, then please look at the following method to achieve the wheel broadcast picture!
  • Now I will share the second method of using native JS to realize the rotation map. The principle of this method to make the rotation map is mainly to control the display of all pictures so as to control the image display, hide all the none, show the block, and then control the image to achieve the rotation effect through the timer (setInterval) function.
  • This method is when I look up the data did not see the rotation of the map to achieve the idea, I hope to give a little help to the later want to write rotation map little friend.

Demand analysis

  • Loop multiple images
  • Click the pointer below the rotation map to jump to the corresponding picture. After the jump, the loop will be played again.
  • You can manually switch pictures left and right, and the indicator points will change accordingly.

Realize the principle of

  • The idea is to keep all the images in one big box, box-IMgs. With float left for each photo, all images overlap and are in the big box, box-imgs; And then I’m going to control the display value of all the images so that the display value of all the images is block, and all the other images are none;
  • The effect of picture rotation can be controlled by changing the display value of the picture every period of time through the setInterval function we are familiar with. We can also add the class name to the picture displayed to increase the cool animation effect.

Realization process & thinking

HTML part

<div class="box-cirs-imgs">
    <div class="box-imgs">
        <ul class="imgs">
            <li><img src="./images/App-4-D.jpg"></li>
            <li><img src="./images/app-2-D.jpg"></li>
            <li><img src="./images/App-3-D.jpg"></li>
            <li><img src="./images/App-1-D.jpg"></li>
        </ul>
    </div>
    <ul class="box-cirs"></ul>
</div>
Copy the code
  • The big box box-cirs-IMgs contains the box box-IMgs that holds all the images and the UL structure of the indicator class named Box-cirs. The box box-IMGS contains ul and LI structures for loading images. It’s a very simple structure, and I’m not going to go into it.
  • Note: I did not write the structure of the Pointers in the HTML section, I will add the Pointers in JS later.

The CSS part

.box-cirs-imgs {
        position: relative;
}
.box-imgs {
    display: inline-block;
    background-color: rgb(165, 165, 165);
}
.imgs li {
    width: 100%;
    float: left; } img { width: 100%; height: 100%; } .ani { animation: ani_img .5s ease 1; } @keyframes ani_img{// Animationscript 0%{opacity: 0; {} 50% opacity: 0.5; } 100%{ opacity: 1; } } .box-cirs { position: absolute; bottom: 10px; right: 50%; transform: translateX(50%); } .box-cirs li { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; cursor: pointer; }. Active {background-color:#00bebe; // Highlight the indicator
}
.quiet{
    background-color: #00263c; // Indicates the default style of the point
}
Copy the code
  • Note: although the above HTML structure does not have the structure to write the pointer, the CSS style does; Added the class name ANI to add animation effects to make the rotation effect more cool!

JS part

  • Use JS to dynamically add dots to the page
// The number of dots should be determined by the number of images.for (var i = 0; i < len; i++) {
        var c_li = document.createElement('li');
        jsCirs_ul.appendChild(c_li);
    }
Copy the code
  • Objects and variables in HTML will be used below
*/ const jsImgs_box = document.querySelector('.box-imgs');
const jsImgs_ul = document.querySelector('.imgs');
const jsImg = jsImgs_ul.children;
const jsCirs_ul = document.querySelector('.box-cirs'); const jsCir = jsCirs_ul.children; Var len = jsimg. length; Var timer = null; Var picN = 0; Var cirN = 0; // The dot subscript for the current display image is hold =false; // Initializes the state when pressed, switch variablesletstratPointX = 0; // Initializes the x coordinates when pressedletendsetX = 0; // Initialize the x coordinates when the key leavesCopy the code
  • First of all, let’s understand how the rendered image is designed. Now let’s define a Roll() rendering function.
// Define a function that controls display by the index of the image passed in, called in autoRunfunction Roll(index, num) {
        for (var i = 0; i < len; i++) {
            jsImg[i].style.display = 'none';
            jsCir[i].className = 'quiet';
            jsImg[i].className = ' ';
        }
        jsImg[index].style.display = 'block';
        jsCir[num].className = 'active';
        jsImg[index].className = 'ani';
    }
Copy the code
  • Now that we have defined the Roll() function, we have completed the most important step. The next thing we need to do is to rotate the image automatically. So here we first define an autoRun() automatic rotation function.
// Set the autoplay function autoRun(), as soon as you pass in the current image and dot index value will automatically start from this pointfunctionAutoRun (PIC,cir) {// When autoRun() is called, the argument is not PIC = 0,cir = 0; ", execute the following statementif(pic ! = 0) {// When the last dot is clicked, the last image is displayed first, and the rotation starts again from the firstif(pic === len - 1) { Roll(pic, cir); pic = 0; cir = 0; time(pic, cir); // Encapsulate a time() function to reduce code reuse}elseRoll(PIC, cir) {// Roll(PIC, cir); ++pic; ++cir; time(pic, cir); }}elseRoll(PIC,cir) {// Roll(PIC,cir); ++ PIC ++cir time(PIC, cir); }}Copy the code
  • Automatic multicast is controlled by the timer setInterval, encapsulated below is the time() function
// Encapsulate autoRun timer with incrementing parameters,function time(pi, ci) {
            timer = setInterval(function () {
                Roll(pi, ci);
                pi++;
                ci++;
                if(PI > len-1) {// When the fourth image is displayed, go back to the first image rotation PI = 0; }if(ci > len - 1) { ci = 0; }}}, 7200)Copy the code
  • AutoRun is called to auto-play when the page loads, passing in the pre-defined PIC = 0,cir = 0 arguments
window.onload = autoRun(picN, cirN);
Copy the code
  • The function of automatic rotation has been implemented above, now it is time to add the indicator click to switch pictures function
/ / useforLoop to bind a click event to each dotfor(var j = 0; j < len; j++) { jsCir[j].index = j; // Give each dot an index value // the dot is highlighted when clickedfunction() {clearInterval(timer)// The previous timer must be cleared each time the function is run! var i = this.index; AutoRun (I, this.index); // Pass the index to I autoRun(I, this.index)Copy the code
  • The PC side simulates the mobile side to increase the touch sliding event of the wheel broadcast graph, and determines whether to trigger the sliding event by monitoring the horizontal position of the coordinate when the mouse is pressed down and the change of the coordinate when the mouse is released.
  • This method is not common in the PERSONAL PC terminal after access to information, so it is quite valuable, I hope to be helpful to you.
JsImgs_box. Onmousedown =function(e) { e.preventDefault(); // Note: preventDefault() holds = as the default behavior to prevent draggingtrue;
        clearInterval(timer);
        // console.log('You clicked the mouse.'); stratPointX = e.clientX; } // You can also add a mouse movement event onMousemove. // Release the mouse to execute the event jsimgs_box-onmouseup =function (e) {
        // console.log('You let go of the mouse.');
        endsetX = e.clientX;
        if (hold) {
            for (var j = 0; j < len; j++) {
                jsImg[j].index = j;
            }
            if((stratPointX - endsetX) > 400) { moveleft(); // encapsulates the left shift function}else if((endsetX - stratPointX) > 400) { moveright(); // Encapsulates the right shift function}elseN = document.querySelector() {// Fix a bug that clears the timer if clicked'.ani').index
                autoRun(n, n);
            }
            hold = false; }} // Image left shift functionfunction moveleft() {
        var i = document.querySelector('.ani').index - 1;
        if(I < 0) {// Bug handling, if the current picture is the first picture, after moving should jump to the fourth picture I = 3; } autoRun(i, i); } // Image right shift functionfunction moveright() {
        var i = document.querySelector('.ani').index + 1;
        if(I > 3) {// Bug handling, if the current picture is the fourth picture, after moving should jump to the first picture I = 0; } autoRun(i, i); }Copy the code
  • Note: If we don’t add preventDefault() to jsImgs_box on click, the default drag behavior of images in Windows will affect onMousemove and onMouseup.

conclusion

In general, it is not difficult to achieve the wheel cast graph, but if you want to write there are many methods, using native JS, pure CSS, RecyclerView, can also use jquery plug-in… In short, there are a lot of methods, but if it is a front-end novice like me, or you can use native JS handwriting a rote graph, so that you can exercise JS, but also master a common component handwriting method of a web page, killing two birds with one stone, why not? Well, this article has been written here, if you find my method has defects, welcome downstairs comments to tell me, after all, for me such a novice, need to keep finding problems! Keep improving! In order to grow up as you see the same cattle!