JS to achieve seamless connection of the rotating picture (4) click on the small dot, move the picture

 

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() {/ / then click the exclusive idea of using the for loop in the event

//Clear all current in Li

　　for(var i = 0;i

　　　　ol.children[i].className = ‘’；

　　}

　　this.className = ‘current’;

var index = this.getAttribute (‘index ‘); / / declare a variable to store the custom attributes obtained by clicking

Animate (UL, – index * focuswidth); / / call the animation function and pass in the parameter UL. The moving distance is the index of the small dot * the width of the picture (must be negative);

　　})

}

　　ol.children[0] = ‘current’;

 

})