Continue to the previous article to learn perfectly implement eight types of js focus carousels (Previous article), for your reference, the specific content is as follows
5. Timely scrolling up and down seamlessly
Ideas:
1. Idea 1: Copy one copy of ul, but return to the position by half the scrolling distance; (large websites perform slightly lower);
2. Idea 2: Through relative positioning, move the first li to the end, and then return ul and Li to position.
window.onload=function(){ var oBox=document.getElementById('box'); var oUl=document.getElementById('ul'); var aLi_u=oUl.getElementsByTagName('li'); var oOl=document.getElementById('ol'); var aLi_o=oOl.getElementsByTagName('li'); var LiHeight=aLi_u[0].offsetHeight; var iNow=0;//Value for the button var iNow2=0;//Used to scroll var timer=null; for(var i=0;i<aLi_o.length;i++){ aLi_o[i].index=i; aLi_o[i].onmouseover=function(){ for(var i=0;i<aLi_o.length;i++){ aLi_o[i].className=''; this.className='active'; //Build relationship: very important iNow=this.index; iNow2=this.index; startMove(oUl,{top:-this.index*LiHeight}); } }; } timer=setInterval(toRun,2000); oBox.onmouseover=function(){ clearInterval(timer); }; oBox.onmouseout=function(){ timer=setInterval(toRun,2000); }; function toRun(){ if(iNow==0){ //Restore li and place ul aLi_u[0].style.position='static'; oUl.style.top=0; //Remember to restore iNow2 to iNow2=0; } if(iNow==aLi_o.length-1){ //Move the first Li to the last iNow=0; aLi_u[0].style.position='relative'; aLi_u[0].style.top=aLi_u.length*LiHeight+'px'; }else{ iNow++; } iNow2++; for(var i=0;i<aLi_o.length;i++){ aLi_o[i].className=''; } aLi_o[iNow].className='active'; startMove(oUl,{top:-iNow2*LiHeight}); }};Reproduction image:
6. The effect of seamless switching between left and right
Ideas:
1. Absolute positioning: All Li except the first one are positioned to the right, compare the index value with the current index, and locate the position of the li to appear.
2. Add "switch" or "time interval" to control the motion switching frequency!
window.onload=function(){ var oUl=document.getElementById('ul'); var aLi_u=oUl.getElementsByTagName('li'); var oOl=document.getElementById('ol'); var aLi_o=oOl.getElementsByTagName('li'); var LiWidth=aLi_u[0].offsetWidth; var iNow=0; var bBtn=true; //All positioned to the right except for the first item for(var i=1;i<aLi_u.length;i++){ aLi_u[i].style.left=LiWidth+'px'; } for(var i=0;i<aLi_o.length;i++){ aLi_o[i].index=i; aLi_o[i].onmouseover=function(){ if(bBtn){ bBtn=false; for(var i=0;i<aLi_o.length;i++){ aLi_o[i].className=''; } this.className='active'; //Judge left and right shift if(iNow<this.index){ //Locate the li aLi_u[this.index].style.left=LiWidth+'px'; //Move the current li away startMove(aLi_u[iNow],{left:-LiWidth}); }else if(iNow>this.index){ aLi_u[this.index].style.left=-LiWidth+'px'; startMove(aLi_u[iNow],{left:LiWidth}); } startMove(aLi_u[this.index],{left:0},function(){ bBtn=true;//The next movement can be performed only after the current movement is completed}); //Assign the current index to iNow=this.index; }//Switch if ends}; }};Reproduction image:
7. Accordion effect
1. Idea 1: Make it by changing the width of li;
2. Idea 2: All li except the first item are positioned at equal intervals, and the position is equidistantly changed after the event is triggered.
window.onload=function(){ var oUl=document.getElementById('ul'); var aLi_u=oUl.getElementsByTagName('li'); //All positioning except the first item for(var i=1;i<aLi_u.length;i++){ //Isometric 30px positioning aLi_u[i].style.left=(470-3*40)+(i-1)*30+'px'; } for(var i=0;i<aLi_u.length;i++){ aLi_u[i].index=i; aLi_u[i].onmouseover=function(){ for(var i=0;i<aLi_u.length;i++){ aLi_u[i].index=i; aLi_u[i].onmouseover=function(){ for(var i=0;i<aLi_u.length;i++){ if(i<=this.index){ // All left arrangements smaller than the index startMove(aLi_u[i],{left:i*30}); }else{// All right arrangements larger than the index startMove(aLi_u[i],{left:(470-3*40)+(i-1)*30}); } } } } } } };Reproduction image:
8. Accordion effect 2
Position Li evenly on the previous basis!
window.onload=function(){ var oUl=document.getElementById('ul'); var aLi_u=oUl.getElementsByTagName('li'); var num=Math.ceil(470/aLi_u.length);//Width of each//All positioning except the first item for(var i=1;i<aLi_u.length;i++){ aLi_u[i].style.left=num*i+'px'; } for(var i=0;i<aLi_u.length;i++){ aLi_u[i].index=i; aLi_u[i].onmouseover=function(){ for(var i=0;i<aLi_u.length;i++){ aLi_u[i].index=i; aLi_u[i].onmouseover=function(){ for(var i=0;i<aLi_u.length;i++){ if(i<=this.index){ startMove(aLi_u[i],{left:i*30}); }else{ startMove(aLi_u[i],{left:(470-3*40)+(i-1)*30}); } } } }; aLi_u[i].onmouseout=function(){ for(var i=0;i<aLi_u.length;i++){ startMove(aLi_u[i],{left:num*i}); } }; }};Reproduction image:
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.