js实现图片淡入淡出效果
更新时间：2021年09月17日 11:59:22 作者：fanfan_h
这篇文章主要为大家详细介绍了js实现图片淡入淡出效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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);
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
在本篇文章里小编给大家分享了关于JavaScript中import用法知识点，有需要的朋友们可以学习下。2019-01-01
工厂模式定义一个用于创建对象的接口，这个接口由子类决定实例化哪一个类。接下来通过本文给大家介绍JavaScript设计模式经典之工厂模式，感兴趣的朋友一起学习吧2016-02-02
点击显示指定元素并隐藏其他同辈元素，下面有个不错的方法,需要的朋友可以参考下2014-02-02
这篇文章主要介绍了JavaScript 俄罗斯方块游戏,结合实例形式详细分析了JavaScript 俄罗斯方块游戏原理、实现步骤及相关操作注意事项,需要的朋友可以参考下2020-04-04
今天小编就为大家分享一篇layui下拉列表select实现可输入查找的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
闲暇之余，学习了一下jfreechart图表生成，结合大虾们的著作，小弟进行了系统的总结，真是获益匪浅，这里推荐给小伙伴们，有需要的朋友可以参考下。2015-04-04
JavaScript 中 this 关键字的作用及改变其上下文的方法
这篇文章主要介绍了JavaScript 中 this 关键字的作用和如何改变其上下文,通过使用 call, apply, bind 方法，可以改变函数中的 this 指向，从而在不同的上下文中使用同一个函数，需要的朋友可以参考下2023-01-01
这篇文章主要介绍了JavaScript 的执行机制，帮助大家更好的理解和使用JavaScript，感兴趣的朋友可以了解下2020-09-09
这篇文章主要为大家详细介绍了JavaScript实现简单计时器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-06-06
JS addEventListener()和attachEvent()方法实现注册事件
这篇文章主要介绍了JS addEventListener()和attachEvent()方法实现注册事件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-01-01
最新评论