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

本文分为上下篇为大家分享了射流研究…焦点轮播图八种经典效果，供大家参考，具体内容如下

基本布局：

div id=' box ' ul id=' ul ' Li style='显示块：'img src=' http : images/1。jpg ' alt=' '/Li Li img src=' http : images/2。jpg ' alt=' '/Li Li img src=' http 3: images/3。jpg ' alt=' '/Li Li img src=' http : images/4。jpg ' alt=' '/Li Li img src=' http : images/5。jpg ' alt=' '/Li/ul

1.普通焦点图

窗户。onload=function(){ var OUl=document。getelementbyid(' ul ')；OUl。GetElementsBytagname(' Li ')；var OOl=文档。getelementbyid(' ol ')；var AlI _ o=OOl。GetElementsBytagname(' Li ')；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].className=AlI _ u[I]。风格。显示='无'；} this . NAmE=' active//控制台。日志(AlI _ o[this。索引])；AlI _ u[这个。索引]。风格。display=' block} } }效果图：图略

2.淡入淡出效果

var OUl=文档。getelementbyid(' ul ')；OUl。GetElementsBytagname(' Li ')；var OOl=文档。getelementbyid(' ol ')；var AlI _ o=OOl。GetElementsBytagname(' Li ')；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].className=AlI _ u[I]。风格。显示='无'；aLi_u[i].style.filter='alpha(不透明度=0 ';AlI _ u[I]。风格。不透明度=0；} this . NAmE=' activeAlI _ u[this。索引]。风格。display=' blockstartMove(aLi_u[this.index]，{ opa city 3360100 })；};}效果图：

3.向上滚动效果：

var OUl=文档。getelementbyid(' ul ')；OUl。GetElementsBytagname(' Li ')；var OOl=文档。getelementbyid(' ol ')；var AlI _ o=OOl。GetElementsBytagname(' Li ')；var LiHiGH=AlI _ u[0].偏右；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=' activestartMove(OUl，{ top :-this。index * LiHigh })；} };}效果图：

4.定时上下滚动：

窗户。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；//当前索引定义变量计时器=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.indexstartMove(oUl，{ top :-this。index * LiHigh })；} };//开定时器timer=setInterval(toRun，2000)；obox。onmouseover=function(){ clearInterval(计时器);};obox。onmouseout=function(){ timer=setInterval(toRun，2000)；};//定时函数函数toRun(){ if(InOw==AlI _ o . length-1){ InOw=0；} else { Inow } for(var I=0；iLi _ o . lentii){ AlI _ o[I].aLi_o[iNow].activestartMove(oUl，{ top :-Inow * LiHigh })；}};效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们，大家继续关注更多精彩焦点轮播图。