1. Rotation map, also known as focus map, is a common webpage special effect in web pages.

Functional requirements:

  1. Mouse through the wheel broadcast map module, left and right buttons display, hide left and right buttons.
  2. Click the right button once, and the picture moves to the left, and so on.
  3. As the picture plays, the following small circle module changes along with it.
  4. Click on the small circle to play the corresponding picture.
  5. The mouse does not pass the wheel – cast map, the wheel – cast map will automatically play the picture.
  6. After the mouse, the rotation of the graph module, automatic playback stop.
window.addEventListener('load', function() { // 1. Var arrow_l = document.querySelector('. Arrow-l '); var arrow_r = document.querySelector('.arrow-r'); var focus = document.querySelector('.focus'); var focusWidth = focus.offsetWidth; AddEventListener ('mouseenter', function() {arrow_l.style.display = 'block'; arrow_r.style.display = 'block'; clearInterval(timer); timer = null; // Clear timer variable}); focus.addEventListener('mouseleave', function() { arrow_l.style.display = 'none'; arrow_r.style.display = 'none'; Timer = setInterval(function() {arrow_r.click(); }, 2000); }); Var ul = focus. QuerySelector ('ul'); var ol = focus.querySelector('.circle'); // console.log(ul.children.length); for (var i = 0; i < ul.children.length; I++) {// create a small li var li = document.createelement ('li'); Li.setattribute ('index', I); Ol. appendChild(li); // Insert li into ol. Li.addeventlistener ('click', Var I = 0; function() {var I = 0; i < ol.children.length; i++) { ol.children[i].className = ''; } // leave my current little li to set current className this.className = 'current'; // 5. Click the circle, Var index = this.getAttribute('index'); var index = this.getattribute ('index'); Num = index; // When we click on a li, we give the index of the li to the circle. // num = circle = index; console.log(focusWidth); console.log(index); animate(ul, -index * focusWidth); Children [0]. ClassName = 'current'; Var first = ul.children[0]. CloneNode (true); ul.appendChild(first); Var num = 0; Var circle = 0; Var flag = true; arrow_r.addEventListener('click', function() { if (flag) { flag = false; Left = 0 if (num == ul.children. Length - 1) {ul.style. Left = 0; num = 0; } num++; animate(ul, -num * focusWidth, function() { flag = true; // open the throttle}); // 8. Click the button on the right, the small circle changes with it, you can declare a variable to control the small circle play circle++; If (circle == ol.children. Length) {circle = 0; } // call circleChange(); }}); Arrow_l. addEventListener('click', function() {if (flag) {flag = false; if (num == 0) { num = ul.children.length - 1; ul.style.left = -num * focusWidth + 'px'; } num--; animate(ul, -num * focusWidth, function() { flag = true; }); // Click the button on the left and the circle changes with it. // if (circle < 0) {// circle = ol.children. Length - 1; // } circle = circle < 0 ? ol.children.length - 1 : circle; // call circleChange(); }}); Function circleChange() {for (var I = 0; i < ol.children.length; i++) { ol.children[i].className = ''; } // Leave the current small circle of the current class ol.children[circle]. ClassName = 'current'; Var timer = setInterval(function() {arrow_r.click(); }, 2000); })Copy the code

2. The throttle valve

To prevent fast playback caused by continuous clicking of the rotation chart button.

Choke valve purpose: When the previous function animation content is finished, to execute the next function animation, so that the event can not fire consecutively.

Core implementation idea: use callback function, add a variable to control, lock function and unlock function.

Start setting a variable var flag= true;

If(flag){flag = false; Do something} Turn off the tap

Using the callback function animation after execution, flag = true turn on the tap