完美实现八种射流研究…焦点轮播图（下篇)

继续上一篇的学习完美实现八种射流研究…焦点轮播图（上篇),供大家参考，具体内容如下

5.定时上下无缝滚动

思路：

1.思路1: 将保险商实验所复制一份，但滚动一半距离重新归位；（大型网站性能略低);2.思路2: 通过相对定位，将第一个里移动到最后，再将保险商实验所和里归位。

窗户。onload=function(){ var oBox=document。getelementbyid(' box ')；var OUl=文档。getelementbyid(' ul ')；OUl。GetElementsBytagname(' Li ')；var OOl=文档。getelementbyid(' ol ')；var AlI _ o=OOl。GetElementsBytagname(' Li ')；var LiHiGH=AlI _ u[0].偏右；var Inow=0；//针对按钮的值var iNow2=0；//用于滚动定义变量计时器=null for(var I=0；iLi _ o . lentii){ AlI _ o[I].索引=我；aLi_o[i].onmouseover=function(){ for(var I=0；iLi _ o . lentii){ AlI _ o[I].CLaSS name=this . CLaSS name=' active//建立关系：很重要iNow=this . indexinow2=this . indexstartmove(OUl，{ top :-this。index * LiHigh })；} };} timer=setInterval(toRun，2000)；obox。onmouseover=function(){ clearInterval(计时器);};obox。onmouseout=function(){ timer=setInterval(toRun，2000)；};函数toRun(){ if(iNow==0){ //还原里并把保险商实验所归位aLi _ u[0]。风格。位置='静态'；乌尔。风格。top=0；//记得把iNow2还原iNow2=0；} if(iNow==aLi_o.length-1){ //将第一个里移到最后iNow=0；aLi _ u[0]。风格。位置='相对'；AlI _ u[0]。风格。top=AlI _ u . length * LiHigh ' px} else { iNow } iNow 2 FOr(var I=0；iLi _ o . lentii){ AlI _ o[I].aLi_o[iNow].activestartMove(oUl，{ top :-InOw2 * LiHigh })；}};效果图：

6.左右无缝切换效果

思路：1.绝对定位：除第一个外的所有里定位到右边，比较索引值与当前索引，定位要出现的里位置。2.加入"开关"或"时间间隔"等来控制运动切换频率！

窗户。onload=function(){ var OUl=document。getelementbyid(' ul ')；OUl。GetElementsBytagname(' Li ')；var OOl=文档。getelementbyid(' ol ')；var AlI _ o=OOl。GetElementsBytagname(' Li ')；var LiWidth=aLi_u[0].offsetwitthvar Inow=0；var bBtn=真；//除第一项外所有定位到右边for(var I=1；iaLi _ u.lengthI){ AlI _ u[I]。风格。left=LiwIdth ' px} for(var I=0；iLi _ o . lentii){ AlI _ o[I].索引=我；aLi_o[i].onmouseover=function(){ if(BBtn){ BBtn=false；for(var I=0；iLi _ o . lentii){ AlI _ o[I].class NAmE=} this . class NAmE=' active//判断左移右移if(iNowthis.index){ //定位要出现的李阿丽_ u[这个。索引]。风格。left=LiwIdth ' px//将当前里移走startMove(aLi_u[iNow]，{ left :-LiWidth })；} else if(inowthis。index){ AlI _ u[this。索引]。风格。left=-LiwIdth ' px '；startMove(aLi_u[iNow]，{ left : LiWidth })；} startMove(aLi_u[this.index]，{left:0}，function(){ bBtn=true；//只有当前运动完才可进行下一次运动});//将当前索引赋值iNow=this.index}//开关如果结束};}};效果图：

7.手风琴效果

1.思路1:通过改变里宽度来制作；2.思路2:除第一项外的所有里按等距间隔定位，触发事件后等距变换位置

窗户。onload=function(){ var OUl=document。getelementbyid(' ul ')；OUl。GetElementsBytagname(' Li ')；//除第一项外所有定位for(var I=1；iaLi _ u.lengthi ){ //等距30px定位aLi _ u[I]。风格。左=(470-3 * 40)(I-1)* 30 ' px '；} for(var I=0；iaLi _ u.lengthi ){ aLi_u[i].索引=我；aLi_u[i].onmouseover=function(){ for(var I=0；iaLi _ u . lengthi){ if(I=this . index){//小于索引的全部左排列startMove(aLi_u[i]，{左： I * 30 })；}else{//大于索引的全部右排列startMove(aLi_u[i]，{ left :(470-3 * 40)(I-1)* 30 })；} } } }};效果图：

8.手风琴效果2

在之前的基础上均匀定位李！

窗户。onload=function(){ var OUl=document。getelementbyid(' ul ')；OUl。GetElementsBytagname(' Li ')；var num=数学。天花板(470/AlI _ u .长度)；//每个的宽度//除第一项外所有定位for(var I=1；iaLi _ u.lengthI){ AlI _ u[I]。风格。left=num * I ' px} for(var I=0；iaLi _ u.lengthi ){ aLi_u[i].索引=我；aLi_u[i].onmouseover=function(){ for(var I=0；iaLi _ u.lengthI){ if(I=this。索引){开始移动(AlI _ u[I]，{左： I * 30 })；}else{ startMove(aLi_u[i]，{ left :(470-3 * 40)(I-1)* 30 })；} } };aLi_u[i].onmouseout=function(){ for(var I=0；iaLi _ u . lengthi){ startMove(AlI _ u[I]，{ left : num * I })；} };}};效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。