JavaScript实现旋转轮播图

最近一直在学习JavaScript，然后看到旋转轮播图的案例，就尝试着用射流研究…做了一个简单的轮播图，因为无法显示动态效果，所以就放个截图：

这个效果是这样的：一共有七张图片，它们会自动地向左滑动，然后左右箭头也可以控制轮播图的左滑和右滑，同时，如果鼠标停在图片上，那么轮播图会停止自动滑动，当鼠标移开时，将会继续向左轮播。首先，我这里封装了两个函数（因为暂且还没有学jQuery，所以用了封装函数的方法来实现),第一个函数是$函数，调用可以获取超文本标记语言中的元素，代码如下：

` function $(select){ if(select的类型！="string"){ console。日志('传入的参数有误');返回null} var第一个字符=select。charat(0)；switch(第一个字符){ case ' # ' :返回文档。getelementbyid(选择。substr(1))；打破；案例".": if(文档。getelementsbyclassname){返回文档。getelementsbyclassname(选择。substr(1))；} else { var result=[]；var allielements=文档。getelementsbytagname(' * ')；console.log(等位基因);for(var I=0；我等位基因长度；i ){ var e=等位基因[一]；var CLaSS name=e . CLaSS namevar CLaSS arr=CLaSS name。split(')；for(var j=0；j级arr。长度；j){ var c=CLaSS ARr[j]；if(c==select。substr(1)){结果。push(e)；打破；} } }返回结果；}休息默认：返回document.getElementsByTagName(选择);} }`第二个函数是一个动画函数，用json实现多条样式的动态改变，从而达到一个动画效果，代码如下： `

函数动画(元素，json，fun){ clearInterval(元素。计时器)；函数getStyle(元素，样式名){ if(元素。currentstyle){//ie浏览器下直接通过当前样式来获取//返回元素。当前样式。heigh返回元素。current style[样式名]；} else { var computed style=window。getcomputed style(元素，null)；返回计算样式[样式名]；} } var isStop=falseelement。timer=setInterval(function(){ isStop=true；for(JSON中的定义变量键){ var target=JSON[key]；无功电流；if (key=='不透明度'){ //当动画的类型为透明度时获取的值应该是浮点类型current=parseFloat(getStyle(element，key))| | 1；} else { //其他情况用整数类型current=ParSeint(GetStyle(element，key))| | 0；} var step=(目标-当前)/10;if (key！='不透明度){ step=step 0？数学天花板（台阶):数学地板（台阶);}当前=步骤；if (key=='不透明度){ if(数学。ABS(目标-电流)0.01){ isStop=false；} else { current=target}元素。风格。不透明度=当前" "；} else { if(Math。目标电流数学。ABS(step)){ isStop=false；} else { current=target } if(key==' zIndex '){ element。风格。zIndex=数学。圆形(当前);} else { element.style[key]=当前“px”；} } } if(IssTop){ ClearInterval(元素。计时器)；console.log('动画完成');if(fun的类型==' fun '){ fun()；} } }, 30);}`接下来就要写超文本标记语言的部分了，因为只有几张图片，所以超文本标记语言的部分很简单：

body div class=' box ' div class=' content ' ul lia href=' # ' img src=' http :/images/1。jpg '/a/Li lia href=' # ' img src=' http :/images/2。jpg '/a/Li lia href=' # ' img src=' http :/images/3。jpg '/a/Li lia href=' # ' img src=' http :/images/4。jpg ' class=' current '/a/Li lia href=' # ' img src=' http :/images/5。jpg '/a/Li lia href=' # ' img src=' http :/images/6。jpg '/a/Li lia href=' # ' img src=' http :/images/7。jpg '/a/Li/ul/div class=' control ' a href=' JAVAScript :'id=' prev '/a a href=' JAVAScript :'id='next'/a /div /div/bodycss样式的部分也不多做叙述。

下面就是射流研究…是部分啦，代码也很简单，理清楚就好

window.onload=function(){ //定位，并给图片设置大小透明度var json=[{ width: 630，top: 23，left: 0，zIndex: 2，opa city 3360 0 }，{ width: 630，top: 23，left: 0 0，zIndex: 3，opa city 3360 0 0 0 }，{ width: 630，top: 23，left :函数refreshmimagelocatin(索引){//默认情况下第我张图对应第我个位置//索引=1时第我个图对应i-1个位置//也就是第我个图对应指数的位置var LIer=$(' Li ')；for(var I=0；liariar . lentii){ var Li=lier[I]；var位置指数=I-指数；控制台。日志(' I=' I ')；控制台。log(' index=' index ')；控制台。日志('位置索引='位置索引')；if(位置索引0){位置索引=7；} var位置数据=JSON[位置索引]；动画(li，locationData，null)；} } refreshmimagelocatin(0)；定义变量索引=0;$('#next ').onclick=function(){ index；if(index==7){ index=0；} refreshImageLocatin(索引);} $('#prev ').onclick=function(){ index-；if(index 0){ index=6；} refreshImageLocatin(索引);} var nextImage=$('#next ').onclickvar contentBox=$(' .内容')[0];//自动播放var timer=setInterval(nextImage，3000)；//当鼠标移动到图片上，停止播放内容框。onmouseover=function(){ clearInterval(计时器);}内容框。onmouseout=function(){ timer=setInterval(nextImage，3000) }}以上就是旋转轮播图的全部内容了，给自己的学习过程做个简单的记录，也顺便巩固一下。