Effect realization of focus carousel

The focus carousel diagram has two more functions than the previous one-frame carousel diagram, 1, the picture carousel can be manually scrolled (New Left and Right arrows), where the focus is to achieve a seamless connection to the left scroll. 2, more small dots below, indicating the location of the picture playback, and can click the small dot jump.

So how does it work?

1. Seamless Connection:

The seamless connection implementation of the front-by-frame carousel diagram to the right, is to place the last negative picture with a copy in the first position. In the same vein, you can seamlessly scroll to the left by simply placing a copy of the first negative image in the last position. Form 5 1 2 3 4 5 1 Such a sort of picture. Also put 7 pictures under a Div, play the transform div position when the carousel.

The HTML code is as follows:

<section class= "container" id= "container" >        <i id= "Leftpo" ></i>        <div class= "IMGs" id= " IMGs ">                                                                                            </div>        <i id=" Rightpo "></i>        <ul id=" Oul "></ul>    </section>

The CSS code is as follows:

   <style> * {padding:0;        margin:0;        } li {list-style:none;            }. container {width:800px;            height:600px;            margin:20px Auto;            position:relative;            Overflow:hidden;            BORDER:3PX double red;        border-radius:2%;            }. IMGs {position:absolute;            Display:flex;        Left: -800px;            } #leftPo {display:inline-block;            width:30px;            height:30px; Background-image:url ('..            /img/left.png ');            Position:absolute;            top:285px;            left:20px;            Z-index:1;            Cursor:pointer;            opacity:0;            Transition:all linear. 5s} #rightPo {display:inline-block;            width:30px;            height:30px; Background-image:url ('..            /img/right_03.png '); PositioN:absolute;            top:285px;            right:20px;            Z-index:1;            Cursor:pointer;            opacity:0;            Transition:all linear. 5s} #oul {/* opacity:0; Transition:all linear. 5s;            */Position:absolute;            bottom:20px;            left:350px;        Display:flex;            }. circle {width:20px;            height:20px;            border-radius:50%;            Background-color:white;            margin-left:10px;        Cursor:pointer; } </style>

2, Small dot set

First, create a small dot (in the previous CSS, first create a style setting with the class name circle):

            Let IMGs = document.getElementById (' IMGs ');            Let Oi = document.getelementsbytagname (' I ');            Let img = document.getElementsByTagName (' img ');            Let Oul = document.getElementById (' Oul ');            Let StopTimer1, Stoptimer;                Create circle for (let i = 0; i < img.length-2; i++) {Let Newli = document.createelement (' li ');                Newli.classname = ' Circle ';            Oul.appendchild (NEWLI);            } Let lis = document.getElementsByTagName (' LI ');            The first picture shows that the first circle is selected for the style Lis[0].style.width = ' 30px ';            Lis[0].style.height = ' 30px ';                    The origin size is judged let circle = function (lis) {for (Let i = 0; i < lis.length; i++) {                        if (i = = (imgs.offsetleft)/( -800)) {lis[i].style.width = ' 30px ';                    Lis[i].style.height = ' 30px '; } else if ((imgs.offsetleft)/(-8XX) = =-1 && i = = 4) {lis[i].style.width = ' 30px ';                    Lis[i].style.height = ' 30px ';                        } else {lis[i].style.width = ' 20px ';                    Lis[i].style.height = ' 20px ';             }                }            }

Here I gave 1 initial values, that is, the first picture that is displayed after the page is refreshed, the corresponding first small circle will be larger. It then creates a function that changes the dot to make it easier to call later.

Then give a for loop, and when the dots click, jump to the corresponding picture.

Loop judgment click for            (Let j = 0; J < Lis.length; J + +) {                Lis[j].onclick = function () {                    imgs.style.left = -800 * J -+ ' px ';                    for (Let i = 0; i < lis.length; i++) {                        if (i = = j) {                            lis[i].style.width = ' 30px ';                            Lis[i].style.height = ' 30px ';                        } else {                            lis[i].style.width = ' 20px ';                            Lis[i].style.height = ' 20px ';}}}            

　　

3, div overall picture move function is established, here gives the function of a parameter speed, used to store the direction and velocity of movement.

           Move the callback function let            move1 = function (speed) {                //Picture carousel                stopTimer1 = setinterval (function () {                    Imgs.style.left = Imgs.offsetleft + speed + ' px ';                    When the 5th play to 5 pictures, jump directly to the first backup 5 picture, which creates the illusion that there is no gap play                    //Judgment Value-4000 for 5 pictures in front of a total of five pictures of the width and then jump directly to left for 0.                    if (Imgs.offsetleft <=-img[0].offsetwidth * (img.length-2)) {                        Imgs.style.left = 0 + ' px ';                    } else if (imgs.of Fsetleft >= 0) {                        imgs.style.left =-img[0].offsetwidth * (img.length-2) + ' px ';                    }                    if (imgs.offsetleft% Img[0].offsetwidth = = 0) {                        clearinterval (stopTimer1);                    }                },                Circle (LIS);            }

4, establish the main function of the whole movement, that is, the program entrance.

Call 1 times every 7 seconds, 7 seconds equals the picture moving 4 seconds (800px, 10ms moving 2px) + 3 seconds to pause            Moveall = function () {let                Stoptimer = SetInterval (functio N () {                    rightpo.onclick ();                }, 7000);                Stop scrolling While the mouse is over the picture area, and the left and right arrows become opaque, move when moved, and the left and right arrows become transparent                container.onmousemove = function () {                    leftPo.style.opacity = ' 0.8 ';                    rightPo.style.opacity = ' 0.8 ';                    oul.style.opacity = ' 0.8 ';                    Clearinterval (Stoptimer);                }                Container.onmouseout = function () {                    leftPo.style.opacity = ' 0 ';                    rightPo.style.opacity = ' 0 ';                    oul.style.opacity = ' 0 ';                    Moveall ();                }            }            Moveall ();

5, left and right arrows click Jump, in the direction and speed to move

Click Activate, clear the timer after each click, prevent multiple clicks on the same button after the            Leftpo.onclick = function () {                clearinterval (stopTimer1);                Move1 ();            }            Rightpo.onclick = function () {                clearinterval (stopTimer1);                Move1 ( -20);            }

　

The complete code is as follows:

<! DOCTYPE html>
　　
　　
Effect realization of focus carousel