3D轮播图是我做过复杂的图片轮播了，由于是利用坐标，层级之间的关系，所以实现起来原理比较简单但是bug巨多，在推推拖拖了好久后，下定决心重新整理成博客，与大家分享！
首先分析一下3D图片轮播的功能需求：
和其它图片轮播大体一致，无非就是点击按钮向左、右翻页，点击下方提示位置小点切换到小点表示对的位置页（我是真的不知道那个小点叫什么名字，大家将就着听吧）
上代码：
基本代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>立体轮播图</title> <style> .block{ position: relative; width: 900px; height: 370px; margin: 0 auto; overflow: hidden; } .imgae_div{ position: relative; width: 900px; height: 300px; } .imgae_div>div{ position: absolute; width: 400px; height: 200px; transition: all 1s linear; } .imgae_div img{ width: 400px; height: 200px; } .imgae_div>div:nth-child(1){ top: 150px; left: 250px; z-index: 6; } .imgae_div>div:nth-child(2){ top: 100px; left: 0px; z-index: 5; } .imgae_div>div:nth-child(3){ top: 50px; left: 0px; z-index: 4; } .imgae_div>div:nth-child(4){ top: 0px; left: 250px; z-index: 3; } .imgae_div>div:nth-child(5){ top: 50px; left: 500px; z-index: 4; } .imgae_div>div:nth-child(6){ top: 100px; left: 500px; z-index: 5; } .btn{ width: 900px; height: 40px; position: absolute; top: 155px; z-index: 999; overflow: hidden; } .btn>span:nth-child(1){ width: 30px; background-color: rgba(164, 150, 243, 0.336); display: block; float: left; text-align: center; line-height: 40px; margin-left: -30px; cursor: pointer; opacity: 0; transition: all 0.5s linear; } .btn>span:nth-child(2){ width: 30px; background-color: rgba(164, 150, 243, 0.336); display: block; float: right; text-align: center; line-height: 40px; margin-right: -30px; cursor: pointer; opacity: 0; transition: all 0.5s linear; } .marright{ margin-right: 0px !important; opacity: 1 !important; } .marleft{ margin-left: 0px !important; opacity: 1 !important; } .point{ width: 108px; height: 14px; position: absolute; bottom: 0; left: 396px; z-index: 10; } .point>div{ width: 14px; height: 14px; border-radius: 50%; background-color: white; float: left; margin: 0 2px; border: 2px solid black; box-sizing: border-box; } </style> </head> <body> <div> <div> <div><img src="https://www.jb51.net/article/img/111.jpg" alt=""></div> <div><img src="https://www.jb51.net/article/img/222.jpg" alt=""></div> <div><img src="https://www.jb51.net/article/img/333.jpg" alt=""></div> <div><img src="https://www.jb51.net/article/img/444.jpg" alt=""></div> <div><img src="https://www.jb51.net/article/img/555.jpg" alt=""></div> <div><img src="https://www.jb51.net/article/img/666.jpg" alt=""></div> </div> <div> <span><</span> <span>></span> </div> <div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> <script src="https://www.jb51.net/article/js/index.js"></script> </body> </html>
js代码：
// 简单说一下我是怎么想的：1.分步实现，先实现图片自己动，在加其它的功能 // 2.每实现一个功能要立马去测bug，因为放到后面就越难找了。 // 3.轮播向左，向右是两个互相联系的方法，需要找到彼此的关系 var imgae_div = document.getElementsByClassName('imgae_div')[0]; var imgae_div_child = imgae_div.children; var btn=document.getElementsByClassName('btn')[0]; var block=document.getElementsByClassName('block')[0]; var new_point = document.getElementsByClassName("point")[0].children; new_point[0].style.backgroundColor = "#000000"; // 利用函数的封装 ps：图片轮播离不开计时器，且个人觉得用setIntervar比较多 img_work(); function img_work() { time = setInterval(function () { img_workfirst('left', 0);//两个参数，判断向左还是向右轮播，索引 }, 1500); } // console.log(point.child); function img_workfirst(left_right, cindex) { // 这里面首先说一下css中写好的默认层关系：从第1张到第6张为别为 6 5 4 3 4 5，和页面的布局有关 var firstpage = {//当前页的各种属性 // 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 (var i = 0; i < imgae_div_child.length; i++) { // for循环遍历所有元素 if (i == imgae_div_child.length - 1) { // 当前页的下一张为 最后一张（位置都是动态切换的） 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; } } } // 向右轮播，借助向左轮播分析 else { for (var i = imgae_div_child.length - 1; 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 () {//禁止用户复制 return false; } 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 (var k = 0; k < imgae_div_child.length; k++) { imgae_div_child[k].style.transitionDuration = "0.5s"; } } // 对应的左右按钮的点击事件 btn.children[0].οnclick=function(event){ if(event.detail==1){//用于控制鼠标的连击，但是效果对于故意测试来说还是有所缺陷 下同 img_workfirst('left',0); } } btn.children[1].οnclick=function(event){ if(event.detail==1){ img_workfirst('right',imgae_div_child.length-1); } } // point的事件 for(var i=0;i<new_point.length;i++){ new_point[i].index=i; new_point[i].οnclick=function(){ for(var k=0;k<imgae_div_child.length;k++){ imgae_div_child[k].style.transitionDuration='0.1s';//动画完成 } var oldindex=0; for(var k=0;k<new_point.length;k++){ if(new_point[k].style.backgroundColor== 'rgb(0, 0, 0)'){//格式必须统一 oldindex=new_point[k].index; } } var num =0;//判断计算转动次数 if(this.index>oldindex){//所需页在当前页的左（左右相对于下方点来说） num=this.index-oldindex; var timego=setInterval(function(){ num--; if(num<0){ clearInterval(timego); } else{ img_workfirst('right',5)//因为方向变了，所以下一页就为当前页的上一页，也就是cindex为5 } },100);//动画时间缩短，优化体验 } else{//所需页在当前页的左（左右相对于下方点来说） num=Math.abs(this.index-oldindex); var timego=setInterval(function(){ num--; if(num<0){ clearInterval(timego); } else{ img_workfirst('left',0) } },100); } } }
关于出现的bug的一些总结：