原生射流研究…实现层叠轮播图

又是轮播？没错，换个样式玩轮播。

HTML:

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title wtf/title/head body div class=' container ' div class=' box ' img class=' front ' src=' http : img/a . jpg ' alt=' PIC ' img class=' back ' src=' http : img/b . jpg ' alt=' PIC ' img class=' active ' src=' http : img/c .

风格box { width : 1200 pxh three : 300 pxtransform-style : perserve-3d；余量： 50px自动；相对位置：} .盒子img { width:600px绝对位置：top : 60p extransition : all . 3s线性；} .box:hover .BTN { opa city 3360 1；} .前{ left: 0px}。返回{ left: 600px}。活动{ left: 300pxtransform:比例尺(1.5);z指数： 10；} .BTN .btn { width: 60px高度： 60px显示器：块；绝对位置：背景-color: rgba(0，0，0，5);font-size : 50px字体系列： '微软雅黑；color:rgba(255，255，255，5);线高： 55px文本对齐：中心；光标：指针；z指数： 100；opa城市3360 0；过渡：不透明度不透明度。3s线性；} .BTN。BTN :第一个孩子{ top: 125px}。BTN。BTN :最后一个孩子{ top : 125 pxright: 0px} /styleJS:

加载时脚本=函数(){ var btns=文档。getelementsbyclassname(' BTN ')，imgs=document。getelementsbyclassname(' box ')[0].getElementsByTagName(' img ')；var index=2，front=0，back=0，offset=false，timer=setInterval(timer，5000)；for(var I=0；ibt ns。长度；我){(函数(一){ btns[i]).onclick=function(){ click(I)}；})(一)；btns[i].onmouseover=function(){ offset=true；} BTN[I].onmouseout=function(){ offset=false；} } for(var I=0；iimgs . lentigi){ imgs[I].onmouseover=function(){ offset=true；} imgs[i].onmouseout=function(){ offset=false；} }函数timer(){控制台。log(offset)if(offset){ return；} else { click(1)} } function click(x){ imgs[index].setAttribute('class '，' ')；if(x===0){ if(-index 0){ index=-imgs。长度；}前=后=索引；if(前端img。长度){前=0 } if(-后0){后=-imgs。长度} imgs[前]。风格。zindex=' 1imgs[back]。风格。zindex=' 0} else { if(index-imgs。长度){ index=0；}前=后=索引；if(前端img。长度){前=0 } if(-后0){后=-imgs。长度} imgs[前]。风格。zindex=' 0imgs[back]。风格。zindex=' 1} imgs[索引]。风格。zindex=' 10imgs[正面]。setAttribute('class '，' front') imgs[back].setAttribute('class '，' back') imgs[index].setAttribute('class '，' active ')；} }/脚本精彩专题分享：jQuery图片轮播Java脚本语言图片轮播引导程序图片轮播

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