Use native JS to write Web home page Carousel diagram

Last Update:2018-07-20 Source: Internet

Author: User

Tags prev switches

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

At present, I am learning js, with what I have learned to write a carousel diagram, can complete the implementation of the function of the carousel, but certainly there is not perfect place, but also hope that we can message exchange, study together.

First, the idea

First, the function is a smooth one, the main function is divided into three chunks:

(a) Click the left and right button to change the picture and cycle.

(b) The image automatically timed switch, when the mouse on the picture when the pause switch, the removal of the recovery.

(iii) Navigation Point transformation and click Switch on the Carousel map

Second, the realization

html and CSS code are as follows:

<!doctype html>
　　
(i) the left and right buttons to switch pictures
First get the element that switches the picture:
var prev = document.getElementById (' prev 'var next = document.getElementById (' Next ');
Then I used three pictures to make up a bunch of picture bars, with the left edge of the picture bar as the starting position of the picture, by constantly modifying the starting position of the picture, so that the picture can be displayed in the area.
Here are two functions that correspond to the left and right toggle buttons.
The width of the picture here is 600px, to click the Next button to let the picture switch the next one, it will have to move the picture bar to the left 600px. In order for the switch to cycle, when the last picture is reached, and then click the Next button, it will be reset to the first image to cycle.
 　　　　 varInitial = parseint (List.style.left);//initial value of ListImage 　　　　 functionNextmove () {Initial-= 600;//Slide the picture to the left          if(Initial <-1200) {Initial= 0; } list.style.left= initial + ' px '; //Call the DOT function to determine the position of the current pointdot (); }            functionPrevmove () {Initial+ = 600;//Slide the picture to the right          if(Initial > 0) {Initial=-1200; } list.style.left= initial + ' px '; }
(ii) Automatic timing of the image switch and when the mouse on the picture when the pause switch, the removal of the recovery
To implement timed AutoPlay, you have to use the Window.setinterval () method to invoke the function at the specified interval and assign the value it returns to the variable time, which automatically switches.
var time = Window.setinterval (Nextmove, 2000);
The. SetInterval () method also has a corresponding clearinterval () method, which is used to cancel the calling function. So I wrote a function to determine whether the state of the mouse is moved in or out, and the image area is bound to the event handler, so that when the mouse is moved into the pause, move out to continue.
  　　   varcontainer = document.getElementById (' container ')); Container.addeventlistener (' MouseEnter ', state,false); Container.addeventlistener (' MouseLeave ', state,false); functionState (eventName) {Switch(eventname.type) { Case' MouseEnter ': Window.clearinterval (time);  Break;  Case' MouseLeave ': Time= Window.setinterval (Nextmove, 2000);  Break; }      }
(iii) Navigation Point transformation and click Switch on the Carousel map
First of all to implement the point followed by the image transformation, so declare a function, determine the position of the current picture bar, to set the corresponding position of the navigation point style, and remove the other navigation point style.
varLISTBTN = document.getElementsByTagName (' span '); functiondot () {Switch(initial) { Case0: Console.log (' 0px '); listbtn[0].classname = ' on '; listbtn[1].classname = ' '; listbtn[2].classname = ' ';  Break;  Case-600: Console.log (' -600px '); listbtn[0].classname = ' '; listbtn[1].classname = ' on '; listbtn[2].classname = ' ';  Break;  Case-1200: Console.log (' -1200px '); listbtn[0].classname = ' '; listbtn[1].classname = ' '; listbtn[2].classname = ' on ';  Break; }      }
Finally, when you click on the corresponding navigation point, jump to the corresponding image. To do this, I add an index attribute to each navigation point, and then, by judging the number of navigation points clicked, switch to the corresponding picture position.
 for(Let i = 0; i < listbtn.length; i++) {Listbtn[i].index=i; Listbtn[i].addeventlistener (' Click ',function(){          Switch(listbtn[i].index) { Case0: Initial= 0;              Dot (); List.style.left= ' 0px ';  Break;  Case1: Initial=-600;              Dot (); List.style.left= ' -600px ';  Break;  Case2: Initial=-1200;              Dot (); List.style.left= ' -1200px ';  Break; }        }, false); }
The above is the whole process of the implementation of the Carousel diagram.
2018-07-20
Use native JS to write Web home page Carousel diagram

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More