[JavaScript] Records several points in the process of completing the carousel

Source: Internet
Author: User

Tags: href lis val Enter binding requires web int procedure

Record a few pits

Before the carousel:

Complete code: GITHUB

Effect preview: GitHub

Recently completed carousel:

Complete code: GITHUB

Effect preview: GitHub

Solve two problems in completing the carousel:

1.setInterval () Conflicts with the button-bound event.

The performance is: SetInterval () set every 3S carousel, in the absence of any action interference, the rotation is normal; but when you need to click the button to jump to another picture, from the click of the button to the success of the image jump time, assuming 1S, also calculate to SetInterval () Set time, that is, from A1 to A2 need 3S, in the process of A1 to A2 2.5S, we click on A3, he will not stay on the A3 3S and then carousel, but from A3 to A4 only need 0.5S (3-2.5).

Workaround: Add a listener event to the carousel component, and once the mouse moves into the component range, the carousel stops; the mouse moves out and the carousel continues. This will ensure that each picture to the next picture will take 3S of time.

$(‘#slidesWrapper‘).on(‘mouseenter‘,function(){    window.clearInterval(timerId)})// 当鼠标移出$(‘#slidesWrapper‘).on(‘mouseleave‘,function(){    timerId = setTimer()})

2. Carousel Confusion

The performance is: Once the browser leaves the Carousel tab, jumps to the other tab after a period of time to come back, the speed of the carousel will be accelerated.

Workaround: Add an event to the document visibilitychange .

MDN

The Visibilitychange event is triggered when the browser tab is hidden or displayed.

We just have to judge: if the tab is hidden, then the carousel stops, the tab is displayed, and the carousel continues to solve the problem.

Such as:

document.addEventListener(‘visibilitychange‘,function(e){    if(document.hidden){        window.clearInterval(timerId)    }else{        timerId = setTimer()        console.log(2)    }})

[JavaScript] Records several points in the process of completing the carousel

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

Tags Index: