Based on the previous article using JS to implement image carousel effect code (I), the response event of left and right arrows is added, and clicking the left and right arrows can also make the picture scroll:
The js code is as follows:
window.onload = function(){//carousel initialization var lunbo = document.getElementById('content');var imgs = lunbo.getElementsByTagName('img');var uls = lunbo.getElementsByTagName('ul');var lis = lunbo.getElementsByTagName('li');var next = document.getElementById('next');var prev = document.getElementById('prev');var item = 0;//In the initial state, a circle is in the highlight mode lis[0].style.fontSize = '26px';lis[0].style.color = '#ffff';imgs[0].style.display = 'block';//Define a global variable to automatically change the order of pictures var pic_index = 1;//Automatic carousel. Use pic_time to record playback, and you can use clearInterval() to clear it at any time. var pic_time = setInterval(autobofang,1000);//Autoplay event processing function autobofang(){if(pic_index >= lis.length){pic_index = 0;}picChange(pic_index);pic_index++;}//Manual carousel for(var i=0;i<lis.length;i++){ lis[i].addEventListener("mouseover",change,false);}function change(event){ var event=event||window.event;var target=event.target||event.srcElement; var children = target.parentNode.children; for(var i=0;i<children.length;i++){if(target == children[i]){ picChange(i); } }} //Picture switching function function picChange(i){ //Let all pictures not be displayed, and all circles are in normal style for(var j=0;j<imgs.length;j++){ imgs[j].style.display = 'none'; lis[j].style.fontSize = '24px';lis[j].style.color = '#999';}//Let the selected index image display, and the corresponding circle is highlighted imgs[i].style.display = 'block'; lis[i].style.fontSize = '26px';lis[i].style.color = '#fff'; }//When the mouse moves closer to the image area, the automatic playback stops lunbo.addEventListener("mouseover",function(){clearInterval(pic_time);},false);//When the mouse moves out of the image area, the automatic playback continues lunbo.addEventListener("mouseout",function(){pic_time = setInterval(autobofang,1000); },false);//Reverse arrow click event, the image will change continuously with the click event next.addEventListener("click",movenext,false);function moveenext(){if(item == 2){item=0;}else{item+=1;}picChange(item);}prev.addEventListener("click",moveprev,false);function moveprev(){if(item == 0){item=2;}else{item-=1;} picChange(item);}}Reproduction diagram: Reproduction diagram of the mouse passing the arrow
When the mouse clicks on the arrow, the picture will change, and the small circle below will also display the highlighting effect of the corresponding picture.
Summarize:
The basic carousel effect has been achieved. What needs to be done later is to simplify and encapsulate the code and improve operational efficiency.