Wheel broadcast graph js Manual wheel broadcast graph and timer wheel broadcast operation

The business requirements

  • Manually by

    • Click the thumbnail below
    • The thumbnail that is currently clicked is highlighted
    • Text descriptions need to change dynamically
    • Let the big picture change accordingly

  • The previous one and the next one

  • Automatically round

Manually by

Element acquisition

  • Thumbnail — the tag to which we will add a click event

  • Text description: Click to modify the text description

  • Large view: Click to switch the display of the large view

    / / access elements / / - thumbnails, tag, we need to add the click event for its let indicators. = the document querySelectorAll (' indicator li ') / / - text description information: Let desc = document.querySelector('. Extra > h3') // A larger after click to toggle the display of the let slides TAB = document. QuerySelectorAll (' slides TAB li ') / / the next button to let next = document. QuerySelector (' extra > .next') // The last button let prev = document.querySelector('.extra >.prev') // Get the entire multicast selector let main = document.querySelector('.main')Copy the code

Implement manual multicast for element binding events

// Bind the click event for the thumbnail: Because we're getting a pseudo-array, we need to iterate, Bind indicators. ForEach (function(ele, index) {// bind event ele. AddEventListener ('click', function() {// 1. Make the thumbnail that is currently clicked, add the highlight style -- Style Class Name Action // 1.1 Find the element in the thumbnail that has the active style, Remove the active style document.querySelector('.indicator. Active ').classList.remove('active') // Add the active style to the currently clicked thumbnail element ele.classList.add('active') // 2. InnerText = '${index + 1}' // 3 Display the corresponding large graph // the large graph element with active style before 3.1, Remove active style document.querySelector('.slides. Active ').classlist.remove ('active') // 3.2 Add active style to the large graph corresponding to the index location slides[index].classList.add('active') }) })Copy the code

The next

You can define a global index and increment the index by 1 when you click the next one, invoking the click event of the li element at the index location

To implement round-robin, we need to determine if the index is out of bounds, and if so, reset the index to 0

// Next next. AddEventListener ('click', If (index > indicators. Length-1) {index = 0} // call the click event for the li element at the index position indicators[index].click() })Copy the code

On one piece

prev.addEventListener('click', Function () {index-- if (index < 0) {index = indicators. Length-1} // Call the click event for the li element at the index position indicators[index].click() })Copy the code

details

We found that if we now click on a thumbnail, then the previous one and the next one, the index position is abnormal

The reason is that clicking on the thumbnail does not update the current correct index position, and the index still starts at 0

// Bind the click event for the thumbnail: Because we're getting a pseudo-array, we need to iterate, Bind event indicators. ForEach (function(ele, I) {// bind event ele. AddEventListener ('click', function() {.......... Index = I})})Copy the code

Automatically round

Add and stop timer

The essence of automatic rotation is manual rotation, which is realized by calling the click event of “next page” button at the specified time interval of timer

// Automatic round-robin // The essence of automatic round-robin is manual round-robin, which is realized in the timer interval specified time, Let timeId = setInterval(function() {next-click ()}, 1000) AddEventListener (' mouseEnter ', function() {clearInterval(timeId)}) AddEventListener ('mouseleave', function() {timeId = setInterval(function() {next-click ()}, 1000)})Copy the code