JS to achieve seamless connection of the rotation chart (3) the use of exclusive ideas, the realization of small dots fill color switch

Time:2020-11-3

 

HTML code

——————————————————

————————————————

JS code

———————————————————————-

window.addEventListener(‘load’,function(){

//1. Get element

var arrow-l = document.querySelector(‘.arrow-l’);

var arrow-r = document.querySelector(‘.arrow-r’);

var focus = document.querySelector(‘.focus’);

var focuwidth = focus.offsetWidth;

focus.addEventListener(‘mouseenter’,function(){

  arrow-l.style.display = ‘block’;

  arrow-r.style.display = ‘block’;

});

focus.addEventListener(‘mouseleave’,function(){

  arrow-l.style.display = ‘none’;

  arrow-r.style.display =’none’;

});

 

//2. Dynamic generation of small dots

var ul = focus.querySelector(‘ul’);

var ol = focus.querySelector(‘ol’);

for(var i = 0;i

      var i = document.createElement(‘li’); 

      li.setAttribute(‘index’,i);

      ol.appendChild(li);

    //3. At the same time of generating small dots, we use exclusive ideas and bind click events to realize color fill switching

    li.addEventListener (‘Click’, function() {/ / click the exclusive thought of using for loop in the event

    //Clear all current in Li

      for(var i = 0;i

          ol.children[i].className = ”;

        }

        this.className = ‘current’;

        })

      }

        ol.children[0] = ‘current’;

       

      })

Recommended Today

PHP 12th week function learning record

sha1() effect sha1()Function to evaluate the value of a stringSHA-1Hash. usage sha1(string,raw) case <?php $str = “Hello”; echo sha1($str); ?> result f7ff9e8b7bb2e09b70935a5d785e0cc5d9d0abf0 sha1_file() effect sha1_file()Function calculation fileSHA-1Hash. usage sha1_file(file,raw) case <?php $filename = “test.txt”; $sha1file = sha1_file($filename); echo $sha1file; ?> result aaf4c61ddcc5e8a2dabede0f3b482cd9aea9434d similar_text() effect similar_text()Function to calculate the similarity between two strings. usage similar_text(string1,string2,percent) case […]