本文详细介绍使用JavaScript实现图片淡入淡出轮播效果的完整代码与逻辑。通过动态调整图片层级(zIndex)与透明度(opacity)，结合定时器与requestAnimationFrame实现平滑过渡，并支持鼠标悬停暂停及小圆点点击交互，适合前端初学者参考学习。
本文分享了一段使用JavaScript实现图片淡入淡出效果的完整代码示例，供读者参考学习。
实现思路分析如下：
首先，在最大父容器内放置多张图片，将第一张初始透明度设置为1（opacity: 1）。
其余图片的透明度初始设为0；同时在图片下方排列一组小圆点作为指示器。
其次，获取所有图片元素，动态设置它们的层级（zIndex），层级数值从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;
}
},接着，为图片定义两种切换方向：顺时针或逆时针。当图片切换时，对应的小圆点状态同步更新。当前显示的图片拥有最高层级且透明度为1，其余图片透明度为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;
}
}
},然后，设置默认状态：第一个小圆点背景色为粉色。当鼠标移入最大父容器时，图片轮播停止；当鼠标点击小圆点时，需判断点击位置与当前激活点的相对关系（左侧或右侧），从而决定切换方向。
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);
}
}
}
}
}最后，通过时间控制逻辑驱动图片的自动轮播。
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);
}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。