原生射流研究…轮播特效

作为一名前端工程师，手写轮播图应该是最基本掌握的技能，以下是我自己原生射流研究…写的轮播，欢迎指点批评：

首先钢性铸铁代码

a { text-decoration : nonecolor : # 3DBF5 } * { margin : 0；padd : 0；} .包装材料{ width : 400 px h8 : 300 pxmargin 3360 100 px自动；} # lunbo { position: relative飞越：隐藏；} # list { position : relative white-space : nowrap；//这块用行元素模拟，所以才用该属性，块元素可修改这块} # list span { display : inline-block；宽度： 400像素；高度： 300像素文本对齐：中心；线高： 300像素；字体粗细：粗体；font-size : 100 pxcolor : # fff } # buttons { position : absolute；底部： 0；文本对齐：中心；宽度： 100%;高度： 40px线高： 40px} #按钮跨度{ display : inline-block；宽度： 15px高度： 5px背景# fffmargin : 0 10pxcursor :指针；transition: all .5s } #按钮span.on { height: 20px}。箭头{位置：绝对值；前：名50%；transform : translateY(-50%)；font-size : 80px字体粗细：粗体；color : # fffopacity : 3 transition : all . 5s } . wrapper : hover .arrow { opa city 3360 1；} #上一个{ left: 10px} #下一个{ right: 10px}然后超文本标记语言代码

div class=' wrapper ' div id=' lunbo ' div id=' list ' style=' left :-400 px；'span style='背景：黄色；'5/span span style='背景：红色；'1/span span style='背景：黑色；'2/span span style='背景：绿色；'3/span span style='背景：蓝色；'4/span span style='背景：黄色；'5/span span style='背景：红色；'1/span/div id=' buttons ' span index=' 1 ' class=' on '/span span index=' 2 '/span span index=' 3 '/span span index=' 4 '/span span index=' 5 '/span/div a href=' JavaScript :'id=' prev ' class=' arrow '/a href=' JAVAScript :'id=' next ' class=' arrow '/a/div/div最后射流研究…代码

窗户。onload=function(){ var lunBo=document。getelementbyid(' lunBo ')；var列表=文档。getelementbyid(' list ')；var BTN=文档。getelementbyid(' button ').getElementsByTagName(' span ')；var prev=文档。getelementbyid(' prev ')；var next=文档。getelementbyid(' next ')；定义变量区间=3000;定义变量计时器；定义变量指数=1;定义变量动画=false for(var I=0；长度；i ) { //按钮加点击事件btn[i].onclick=function(){ if(this。类名=' on ')//如果是状态按钮直接返回节约资源{返回};var myIndex=parsent(这。GetAttribute(' index ')；//获取按钮的指数属性值var offset=-400 *(myIndex-index)；//根据属性值计算偏移量动画（偏移)//轮播动画index=myIndex//改变索引值显示BTN()；//显示状态按钮} }函数show BTN(){ for(var I=0；长度；i ) { btn[i].btn[index-1].类名=' on } prev . onclick=function(){//上一页事件如果(动画){ //如果是动画状态直接返回解决病菌返回；} if(index==1){ index=BTN。长度；} else { index-=1；}动画(400);显示BTN()；} next.onclick=function () { if(动画){ return} if(index==BTN。长度){ index=1；} else { index=1；} animate(-400)；显示BTN()；}函数动画(偏移){动画=真；//表示在动画状态var NewLeft=ParSeint(列表。风格。左)偏移量；//计算新的左边的值变化时间=400;//设置动画总时间定义变量区间=10;//动画帧时间变化速度=偏移/(时间/间隔);//每帧运动距离函数go(){ if((speed 0 ParSeint(list。风格。左)NewLeft)| |(速度0 ParSeint(列表。风格。左)NewLeft(){//通过条件判断到它是否还要继续进行动画名单。风格。left=ParSeint(列表。风格。左)速度px '；setTimeout(go，interval)} else { animated=false；//动画状态结束名单。风格。left=NewLeft ' px//现在的位移if(ParSeint)(列表。风格。左)-2000){//辅助假图名单。风格。left=-400 ' px '；} else if(ParSeint(list。风格。左)-400){列表。风格。left=-2000 ' px '；} } } go()；} function play(){ timer=setTimeout(function(){ next。onclick()；play()；},间隔)} play()；函数stop () { clearTimeout(计时器);} lunBo.onmouseover=叠音键. onmouseout=播放}以上是所有代码，欢迎指点交流！

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