跳转到主内容
websoft网络软件专家 - 深耕网络技术，打造实用软件！
📁 网站地图

js实现图片淡入淡出效果

陆砚码
陆砚码
• 👁 0人浏览过

本文实例为大家分享了js实现图片淡入淡出的具体代码，供大家参考，具体内容如下

分析过程：

1.给最大父元素里添加多张图片，让第一张图片的透明度为1

opacity: 1其余图片的透明度为0；

给图片下面设置一排小点

2.获取每张图片，动态设置不同层级，层级大小从4到0依次设置；

Setz_index:function(){for(var i=0;i3.给图片设置两种出现的方式，顺时针出现或者逆时针出现；图片变动的同时，对应的小点也进行变动。出现的图片层级最高，透明度为一，其余图片透明度为0，并且对应的小点颜色变为粉色。

Animatezindex:function(math,count){for(var i=0;i

}}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;i0) { //从当前圆点的右边进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);}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:原生js和jquery实现图片轮播淡入淡出效果js如何实现淡入淡出效果原生js实现fadein 和 fadeout淡入淡出效果js实现图片淡入淡出切换简易效果js淡入淡出的图片轮播效果代码分享js控制淡入淡出示例代码JS实现图片延迟加载并淡入淡出效果的简单方法js实现图片加载淡入淡出效果js实现淡入淡出轮播切换功能js运动框架_包括图片的淡入淡出效果

相关文章