原生射流研究…实现匀速图片轮播动画

射流研究…实现轮播图实现结果图：

需求：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脚本语言图片轮播引导程序图片轮播

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