| 本文实例为大家分享了js实现图片淡入淡出的具体代码，供大家参考，具体内容如下 分析过程：1.给最大父元素里添加多张图片，让第一张图片的透明度为1 opacity: 1 其余图片的透明度为0；
给图片下面设置一排小点
2.获取每张图片，动态设置不同层级，层级大小从4到0依次设置； Setz_index:function(){ for(var i=0;i<this.Photo.length;i++ ){ index=i; this.Photo[i].style.zIndex =this.Photo.length-i-1; } },3.给图片设置两种出现的方式，顺时针出现或者逆时针出现；图片变动的同时，对应的小点也进行变动。出现的图片层级最高，透明度为一，其余图片透明度为0，并且对应的小点颜色变为粉色。 Animatezindex:function(math,count){ for(var i=0;i<count;i++){ for(var k=0;k<this.Photo.length;k++) { //console.log(1); var index=parseInt (this.Photo[k].style.zIndex ); //43210 04321 10432 if(math=="n"){ index++; //小点从左向右变化颜色 if(index ==this.Photo.length){ index=0; this.Photo[k].style.opacity =0; this.Crclelist [k].style.background ="#fff"; } if(index==this.Photo.length-1){ this.Photo [k].style.opacity= 1; this.Crclelist [k].style.background ="pink"; this.Savecolor= this.Crclelist [k]; } } else{ index--; //小点从右向左变化颜色 if(index==-1){ index=this.Photo.length-1; } if(index==this.Photo.length-1){ this.Photo [k].style.opacity= 1; this.Crclelist [k].style.background ="pink"; this.Savecolor= this.Crclelist [k]; } if(index==this.Photo.length-2){ this.Photo[k].style.opacity =0; this.Crclelist [k].style.background ="#fff"; } } this.Photo[k].style.zIndex =index; } } },4.设置默认值，让第一个小点的颜色为粉色，当鼠标滑进最大父元素时，图片停止转动；当鼠标滑进小圆点时，分为两种情况，从当前的圆点的左边进入和右边进入。 Moren_set:function(){ var that=this; that.Crclelist [0].style.background ="pink"; that.Savecolor =that.Crclelist[0]; that.Bigblock.onmouseenter=function(){ // console.log(1); window.cancelAnimationFrame ( glider.Timeset); }; that.Bigblock.onmouseleave=function(){ glider.Timelines(); } //点的事件，跟随图片变化 for(var i=0;i<that.Crclelist.length;i++){ that.Crclelist[i].index=i; that.Crclelist[i].onmouseenter =function(){ var oldindex=that.Savecolor.index; var newindex=this.index; //鼠标滑进的圆点的索引 this指的是当前的圆点的滑动事件 // console.log(newindex); if(newindex -oldindex >0) { //从当前圆点的右边进 var ri=newindex -oldindex; // console.log(ri); var le= that.Crclelist.length-ri; // console.log(le); if(ri<=le){ console.log("向右",ri); that.Animatezindex("n",ri); } if(ri>le){ console.log("向左",le); that.Animatezindex("s",le); } } else if(newindex -oldindex<0){ var ri1=Math.abs(newindex-oldindex) ; //取绝对值 var le1=that.Crclelist.length-ri1; if(ri1<=le1){ console.log("向左", ri1); that.Animatezindex("s",ri1); } if(ri1>le1){ console.log("向右", le1); that.Animatezindex("n",le1); } } } } }5.设置转动事件，根据时间来改变控制图片的转动。 Timelines:function(){ var nowtime=new Date().getTime (); if((nowtime -glider.Oldtime) >=glider.TimeDely ){ glider.Oldtime =nowtime; glider.Animatezindex ("n",1); //向 右变化 } //可以通过setTimeout和setInterval方法来在脚本中实现动画， // 但是这样效果可能不够流畅，且会占用额外的资源。 //requestAnimationFrame方法用于通知浏览器重采样动画,循环播放。 /*cancelAnimationFrame cancelAnimationFrame 方法用于取消先前安排的一个动画帧更新的请求。*/ glider.Timeset =window.requestAnimationFrame(glider.Timelines); }以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持wanshiok.com。
js实现web留言板功能
React项目中应用TypeScript的实现 |
