JavaScript Basics-Focus Map Carousel (reprint)

First build the HTML structure :

 <div id= "container" > <div id= "list" style= "left: -600px;" >        </div> <div id= "Buttons" > &L T;span index= "1" class= "on" ></span> <span index= "2" ></span> <span index= "3" ></ Span> <span index= "4" ></span> <span index= "5" ></span> </div> <a HR ef= "javascript:;" id= "prev" class= "Arrow" >&lt;</a> <a href= "javascript:;" id= "Next" class= "Arrow" >&gt;</a></div> 

The outermost div is the container, and then its child elements are the image of the ID of the list of Div, the small circle button to store the ID of Buttons Div, the last two a tag is left and right toggle button. One more question to note is that this focus graph carousel actually has only five graphs, but in the DIV with the ID list there are seven pictures, why? The principle is : the first picture (5.jpg) and the Last picture (1.jpg) is to achieve the effect of infinite scrolling, because this effect is by setting the ID of the DIV container's left value to achieve the picture switch, so when the carousel to the fifth picture (5. JPG), then switch to the right, then the last picture is switched in, at this time the left value is -3600px, and at the same time we will change its value to -600px, so we return to the real first picture. Because the last picture is the first picture (1.jpg), so the user does not seem to have any changes to the naked eye, so that the effect of infinite scrolling, the other way! So if you don't have those two pictures as a transition, the effect will be the same, and when the carousel is on the last one it will blink:

To set CSS styles :

*{margin:0;     padding:0; }a{Text-decoration:none;} body {padding:20px;}     #container {width:600px;     /* Here 600x400 is the width of the picture */height:400px;     BORDER:3PX solid #333;   Overflow:hidden; /* Hide the overflow picture, because the picture left floats, the total width is 4200*/position:relative;}   #list {width:4200px;     /* Here set 7 picture total width */height:400px;  Position:absolute; /* location based on parent container container */z-index:1;} #list img {float:left;}     #buttons {position:absolute;     height:10px;     width:100px;   Z-index:2;     /* button on the top of the picture */bottom:20px; left:250px;}     #buttons span {cursor:pointer;     Float:left;     border:1px solid #fff;     width:10px;     height:10px;     border-radius:50%;     Background: #333; margin-right:5px;}   #buttons. on {background:orangered;     /* The selected button style */}.arrow {cursor:pointer;    Display:none;     /* The toggle button is hidden by default */line-height:39px;     Text-align:center;     font-size:36px;     Font-weight:bold;     width:40px;    height:40px;  Position:absolute;     Z-index:2;     top:180px;     Background-color:rgba (0,0,0,.3); Color: #fff;}. Arrow:hover {Background-color:rgba (0,0,0,.7);}   #container: hover. arrow {display:block; /* Display the left and right toggle buttons on the top of the container */} #prev {left:20px;} #next {right:20px;}

Style is not difficult, mainly according to the actual situation to modify a size on the line. Because the picture group is left floating, so the width is far greater than the parent container width, if not set Overflow:hidden; The effect is like this:

Well, the most important thing is JS to achieve the Carousel effect:

First to achieve the simplest through the left and right buttons to achieve the switch:

Window.onload = function () {            var container = document.getElementById (' container ');            var list = document.getElementById (' list ');            var buttons = document.getElementById (' buttons '). getElementsByTagName (' span ');            var prev = document.getElementById (' prev ');            var next = document.getElementById (' Next ');                     Toggle Animation           function Animate (offset) {                list.style.left = parseint (list.style.left) + offset+ ' px ';           }                      Next.onclick = function () {                animate ( -600);            }                        Prev.onclick = function () {                animate (+)}            }

This can be a simple implementation of the switching effect, but when the switch to the last one and then to the right to switch to the above-mentioned blank phenomenon, so, you need to determine the list of left value if greater than-600 (-600 is the default setting, in order to display the first picture [1.jpg] Set it to-3000, if less than 3000, set it to-600, so it can achieve wireless scrolling, but also found that when the picture switch scrolling, the small button does not change, then we need to pass an index value (the default is 1) to index the current small button is selected , and add the. On class, before adding, you need to remove the class of the small button that originally had. On, the last point is because the small button only five, want to achieve unlimited switching, you need to determine the boundary value, when index is 1 o'clock, if you want to switch to the left, it is set to 5, This will go back to the fifth little button, the other way.

Window.onload = function () {    var container = document.getElementById (' container ');    var list = document.getElementById (' list ');    var buttons = document.getElementById (' buttons '). getElementsByTagName (' span ');    var prev = document.getElementById (' prev ');    var next = document.getElementById (' Next ');    var index = 1;    Used to index the current button    function animate (offset) {         var newleft =  parseint (list.style.left) + offset;      

         List.style.left = newleft+ ' px ';

         if (Newleft <-3000) {

            List.style.left =–600 + ' px ';

         }  

          if (Newleft >-600) {

            List.style.left =–3000 + ' px ';

             }    //Used to add style    function Showbutton () {//to the button to        find the original. On class and remove its class for        (var i = 0; i < buttons.length; i++) {            if (buttons[i].classname = = ' on ') {                buttons[i].classname = ';                break;            }        }        Add Class for current button, index subscript starting from 0, therefore 1        buttons[index-1].classname = ' on ';    }    Next.onclick = function () {        if (index = = 5) {            index = 1;        }        else {            index + = 1;        }        Animate ( -600);        Showbutton ();    }    Prev.onclick = function () {        if (index = = 1) {            index = 5;        }        else {            index-= 1;        }        Animate (+);        Showbutton ();    }}

Next need to click the small button to achieve the switch effect, unlike the left and right switch, the button can be arbitrarily clicked to switch, such as from the first button directly click on the fifth button, so that is not every time is-600 interval, So we also need to get the difference between the current click button and the index value of the previous button, then multiply-600 to get the real offset, and at the same time, click on the button to add the selected style class. But how do you know which button is currently clicked, and remember that we set the custom property index in the button's span tag, which corresponds to the index value of each button, so that when you click the button, you can know which button it is by getting the value of the button's Index property. The last point is that when you continue to click on the current button, such as the carousel to the first picture, you click the corresponding first button, you should stop the switch again, to optimize.

Window.onload = function () {    var container = document.getElementById (' container ');    var list = document.getElementById (' list ');    var buttons = document.getElementById (' buttons '). getElementsByTagName (' span ');    var prev = document.getElementById (' prev ');    var next = document.getElementById (' Next ');    var index = 1;    Used to index the current button    function animate (offset) {                  

         var newleft =  parseint (list.style.left) + offset;      

         List.style.left = newleft+ ' px ';

         if (Newleft <-3000) {

            List.style.left =–600 + ' px ';

         }  

          if (Newleft >-600) {

            List.style.left =–3000 + ' px ';

    }//used to add Style function Showbutton () {//to the button to find the original. On class and remove its class for (var i = 0; i < buttons.length ;                i++) {if (Buttons[i].classname = = ' on ') {buttons[i].classname = ';            Break    }}//Add Class Buttons[index-1].classname = ' on ' for the current button;        } Next.onclick = function () {if (index = = 5) {index = 1;        } else {index + = 1;        } animate (-600);    Showbutton ();        } Prev.onclick = function () {if (index = = 1) {index = 5;        } else {index-= 1;        } animate (600);    Showbutton (); }//By looping the button to add a click event for (var i = 0; i < buttons.length; i++) {Buttons[i].onclick = function () {/            /When continuing to click on the current button, do not switch if (this.classname = = ' on ') {return; }//By getting the custom property of the button label index, get the index value, and then calculate the difference var myindex = parseint (This.getattRibute (' index '));                 Real cheap amount var offset = -600 * (myindex-index);            Animate (offset);            Set the value of the Click Button's Index property to the current index value index = Myindex;        Showbutton (); }    }}

The

Then achieves the effect of smooth switching, the effect that has been achieved before is to switch directly, and we want to be able to smooth the transition, the experience is better. The main implementation method is through the timer setTimeout. Set the total time required for the switchover, each interval how much time, and then find out the displacement of each transition, determine whether to reach the target value, if no, then continue to perform the timer displacement. Another point is that if you click the toggle button continuously, the picture will be switched immediately, but we want the effect is to wait until the current picture switch is completed before the next switch, this can be optimized. Finally realize the auto-play effect, when the mouse does not click, it can automatically play, here use to setinterval timer, every 3 seconds to perform a click event, and when the mouse moved up the time to clear the event, leaving the time and automatically play. OK, tidy up the code:

Window.onload = function () {var container = document.getElementById (' container ');    var list = document.getElementById (' list ');    var buttons = document.getElementById (' buttons '). getElementsByTagName (' span ');    var prev = document.getElementById (' prev ');    var next = document.getElementById (' Next ');    var index = 1;      Used to index the current button var len = 5;   Number of images var animated = false;    Used to determine if the switchover is var interval = 3000;             Auto Play timer seconds, here is 3 seconds var timer;     Timer function animate (offset) {animated = true;     Toggle in-progress var time = 300;   Total displacement time var inteval = 10;   Displacement interval time var speed = offset/(time/inteval); The amount of each displacement var left = parseint (list.style.left) + offset; Target value var go = function () {//These two cases indicate that the if (Speed > 0 && parseint (list.style.lef T) < left) | | (Speed < 0 && parseint (list.style.left) > left)) {list.style.left = parseint (list.style.left) + SPEEd + ' px '; SetTimeout (go, inteval);                Continue to switch go () function} else {List.style.left = left + ' px ';                if (left>-600) {list.style.left = -600 * len + ' px ';                } if (left< ( -600 * len)) {list.style.left = ' -600px '; } animated = false;    Switch Complete}} go (); }//used to add Style function Showbutton () {//to the button to find the original. On class and remove its class for (var i = 0; i < buttons.length; i+                +) {if (Buttons[i].classname = = ' on ') {buttons[i].classname = ';            Break    }}//Add Class Buttons[index-1].classname = ' on ' for the current button;            }//Auto Play function play () {timer = SetTimeout (function () {Next.onclick ();        Play ();    }, Interval);    }//Clear Timer function stop () {cleartimeout (timer); }//Right-click Next.onclick = Function () {if (animated) {//If the switchover is still in progress, it ends directly until the switch completes the return;         } if (index = = 5) {index = 1;        } else {index + = 1;        } animate (-600);    Showbutton ();        }//Left click Prev.onclick = function () {if (animated) {///If the switchover is still in progress, it ends directly until the switch completes the return;        } if (index = = 1) {index = 5;        } else {index-= 1;        } animate (600);    Showbutton ();         } for (var i = 0; i < buttons.length; i++) {Buttons[i].onclick = function () {if (animated) {            If the switch is still in progress, end directly until the switch completes the return;            } if (This.classname = = ' on ') {//If the button clicked is the current button, do not switch, end return;            }//Gets the custom property of the button index, which is used to get the index value var myindex = parseint (This.getattribute (' index '));   var offset = -600 * (myindex-index);            Calculates the total displacement amount of animate (offset);index = Myindex;        Assigns the new index value to index Showbutton ();    }} Container.onmouseover = stop;//The parent container's move-in move-out event container.onmouseout = play;  Play (); Call Auto Play Function}

Reference Video: HTTP://WWW.IMOOC.COM/LEARN/18

JavaScript Basics-Focus Map Carousel (reprint)