原生射流研究…实现匀速图片轮播动画
射流研究…实现轮播图实现结果图:
需求:1 根据图片动态添加小圆点2目标移动到小圆点轮播图片3鼠标离开图片,定时轮播图片;鼠标在图片上时暂停四左右两侧可点击轮播图片
一、布局部分
超文本标记语言部分
div class='w main clearfix '!-主内容部分开始- div class='slider '!-轮播图部分开始-ul class=' imgs ' id=' slider _ imgs ' liimg src=' http : images/slide r01。jpg ' id=' slide ' alt=' '//Li liimg src=' http : images/slide r02。jpg ' id=' slide ' alt=' '//Li liimg src=' http : images/slide r03。jpg ' id=' slide R3 ' alt=' '//Li liimg src=' http 33333 class=' arrow _ 1 '/a a href=' JavaScript :class='arrow_2'/a /div /div!-轮播图部分结束- /divcss部分。滑块ul。imgs { height :453 px宽度宽度:4380像素位置:绝对;}.滑块ul。Li {显示:块;宽度宽度:730像素宽度:453像素宽度:像素宽度。滑块。圆形{ position:absolute绝对值左侧:50%;bottom:8px}。滑块。圈出Li { cursor : pointer float : left宽度:18 px高度:18pxmargin:4px背景-颜色: # 3e 3e边界半径: 50%;文本对齐:中心;color: # fff}。滑块。圈李。当前{背景:粉色;颜色:白色;}JS部分
一这是匀速动画函数的封装
/* * * * * obj :做动画的数字正射影像图对象* * *目标:对象最终运动到的目标位置(十轴)*/函数制作(对象、目标)动画{//每次调用要先清定时器透明间隔(obj .计时器);//根据目标位置判断移动的方向,每到目标位置步长为20,否则为-20 var速度=targetobj.offsetLeft?20:-20;物体timer=setInterval(function(){ var left=obj。offsetleftobj.style.left=左速度“px”;定义变量结果=目标-左侧;//目标位置与当前位置在步长20以内,则到达目标位置if(Math.abs(结果)=20){//停止运动透明间隔(obj .计时器);//有20像素差距我们直接跳转目标位置物体。风格。left=目标“px”;} },2函数:`这里写代码片0);}轮播图封装函数:
函数滑块(){ //焦点图信息数字正射影像图节点var imgs=文档。getelementbyid(' slider _ imgs ');var slides=imgs . parentnodevar lis=imgs。getelementsbytagname(' Li ');var箭头=文档。getelementbyid('箭头');arrows.children//创建小圆点var circle=文档。创建元素(' ol ');circle.setAttribute('class ',' circle ');imgs.parentNode.appendChild(圆形);for(var i=0,len=lis。长度-1;伊琳;I){ var Li=文档。创建元素(“李”);李。innerhtml=I 1;圆圈。阑尾(李);} //marginLeft=-imgli(长度)*olLi(宽度)/2圈。风格。左边距=(-13 * len)“px”;var olLis=circle . children olLis[0].类名='当前;//为小圆点添加鼠标事件for(var I=0;iolLis.lengthi ){ //当前小圆点索引奥利司[我]。索引=我;奥利司[我]。onmouseover=function(){ for(var j=0;jolLis.lengthj){ OLIs[j].class NAmE=} this . class NAmE=' current//图片切换imgs的半铸钢钢性铸铁(铸造半钢)部分加上定位动画(imgs,这个。索引*-lis[0]).offset withts));//当鼠标挪到定时器,当前播放图片与原点位置回原k=z=p=q=this . index };}//鼠标移动到轮播图,不定时播放幻灯片。onmouseover=function(){//清除自动轮播定时器清除间隔(时间);};//鼠标移开,自动轮播幻灯片。on mouse out=function(){ Time=set interval(自动播放,1000);};//定时器部分var Time=null,k=0,z=0;时间=设置间隔(自动播放,1000);//自动轮播图片,定时器时间函数autoPlay(){ k;if(klis。长度-1){ imgs。风格。left=0;k=1;}动画(imgs,k *-lis[0].offset withts));z;if(ZolLis。length-1){ z=0;} for(var j=0;jolLis.lengthj){ OLIs[j].OLIs[z].class name=' current } var q=0;var p=0;箭头链接[1]。onclick=function(){ q;if(qlis。长度-1){ imgs。风格。left=0;q=1;} p;if(pollis。length-1){ p=0;} for(var j=0;jolLis.lengthj){ OLIs[j].OLIs[p].类名='当前;动画(imgs,q*(列表[0])。offset withts));} }精彩专题分享:jQuery图片轮播Java脚本语言图片轮播引导程序图片轮播
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
版权声明:原生射流研究…实现匀速图片轮播动画是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。