好资源导航 » 文章资讯 » 原生js实现3D轮播图

原生js实现3D轮播图

2023-08-13 20:21:04 226

3D轮播图是我做过复杂的图片轮播了，由于是利用坐标，层级之间的关系，所以实现起来原理比较简单但是bug巨多，在推推拖拖了好久后，下定决心重新整理成博客，与大家分享！

首先分析一下3D图片轮播的功能需求：

和其它图片轮播大体一致，无非就是点击按钮向左、右翻页，点击下方提示位置小点切换到小点表示对的位置页（我是真的不知道那个小点叫什么名字，大家将就着听吧）

上代码：

基本代码：







立体轮播图

< >

js代码：

//简单说一下我是怎么想的：1.分步实现，先实现图片自己动，在加其它的功能
//2.每实现一个功能要立马去测bug，因为放到后面就越难找了。
//3.轮播向左，向右是两个互相联系的方法，需要找到彼此的关系
varimgae_div=document.getElementsByClassName('imgae_div')[0];
varimgae_div_child=imgae_div.children;
varbtn=document.getElementsByClassName('btn')[0];
varblock=document.getElementsByClassName('block')[0];
varnew_point=document.getElementsByClassName("point")[0].children;
new_point[0].style.backgroundColor="#000000";
//利用函数的封装ps：图片轮播离不开计时器，且个人觉得用setIntervar比较多
img_work();
functionimg_work(){
time=setInterval(function(){
img_workfirst('left',0);//两个参数，判断向左还是向右轮播，索引
},1500);
}
//console.log(point.child);
functionimg_workfirst(left_right,cindex){
//这里面首先说一下css中写好的默认层关系：从第1张到第6张为别为654345，和页面的布局有关
varfirstpage={//当前页的各种属性
//getComputedStyle()获取css属性
left:window.getComputedStyle(imgae_div_child[cindex]).left,
top:window.getComputedStyle(imgae_div_child[cindex]).top,
zIndex:window.getComputedStyle(imgae_div_child[cindex]).zIndex,
backcolor:window.getComputedStyle(new_point[cindex]).backgroundColor
};
if(left_right=='left'){
//向左轮播为默认轮播
for(vari=0;i=0;i--){
if(i==0){
imgae_div_child[i].style.left=firstpage.left;
imgae_div_child[i].style.top=firstpage.top;
imgae_div_child[i].style.zIndex=firstpage.zIndex;
new_point[i].style.backgroundColor=firstpage.backcolor;

}
else{
imgae_div_child[i].style.left=window.getComputedStyle(imgae_div_child[i-1]).left;
imgae_div_child[i].style.top=window.getComputedStyle(imgae_div_child[i-1]).top;
imgae_div_child[i].style.zIndex=window.getComputedStyle(imgae_div_child[i-1]).zIndex;
new_point[i].style.backgroundColor=window.getComputedStyle(new_point[i-1]).backgroundColor;


}
}
}
firstpage=null;
//将表示当前页的数据清空，防止bug（因为当前页也是动态变化的，需要动态创建）
}
//console.log(new_point);

//消除一些bug
window.onblur=function(){//窗口失焦时，计时器停止
clearInterval(time);
}
window.onfocus=function(){
img_work();//获焦时开启计时器
}
document.onselectstart=function(){//禁止用户复制
returnfalse;
}
block.οnmοuseenter=function(){//鼠标进入轮播图时，两个按钮滑动出来
clearInterval(time);
btn.children[1].className='marright';
btn.children[0].className='marleft';
}
block.οnmοuseleave=function(){//离开时和平时隐藏
img_work();
btn.children[1].className='';
btn.children[0].className='';
for(vark=0;koldindex){//所需页在当前页的左（左右相对于下方点来说）
num=this.index-oldindex;
vartimego=setInterval(function(){
num--;
if(num<0){
clearInterval(timego);
}
else{
img_workfirst('right',5)//因为方向变了，所以下一页就为当前页的上一页，也就是cindex为5
}
},100);//动画时间缩短，优化体验
}
else{//所需页在当前页的左（左右相对于下方点来说）
num=Math.abs(this.index-oldindex);
vartimego=setInterval(function(){
num--;
if(num<0){
clearInterval(timego);
}
else{
img_workfirst('left',0)
}
},100);
}
}
}

关于出现的bug的一些总结：

1、注意左右的区分与联系
2、注意连续点击的bug
3、注意切换窗口，切换页面，最小化等这些切换的bug
4、注意代码格式，在js中写css样式时，要注意格式

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

返回顶部
3162201930
czq8825@qq.com

原生js实现3D轮播图

热门推荐

随机推荐