原生js实现3D轮播图

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

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

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

上代码：

基本代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" 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 class="block"><div class="imgae_div"><div><img src="./img/111.jpg" alt=""></div><div><img src="./img/222.jpg" alt=""></div><div><img src="./img/333.jpg" alt=""></div><div><img src="./img/444.jpg" alt=""></div><div><img src="./img/555.jpg" alt=""></div><div><img src="./img/666.jpg" alt=""></div></div><div class="btn"><span><</span><span>></span></div><div class="point"><div></div><div></div><div></div><div></div><div></div><div></div></div></div><script src="./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.onmouseenter=function(){//鼠标进入轮播图时，两个按钮滑动出来clearInterval(time);btn.children[1].className='marright';btn.children[0].className='marleft';
}
block.onmouseleave=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].onclick=function(event){if(event.detail==1){//用于控制鼠标的连击，但是效果对于故意测试来说还是有所缺陷 下同img_workfirst('left',0);}
}
btn.children[1].onclick=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].onclick=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的一些总结：

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

。。。。。。

原生js实现3D轮播图相关推荐

html图片3djs轮播,原生js实现3D轮播图
3D轮播图是我做过复杂的图片轮播了,由于是利用坐标,层级之间的关系,所以实现起来原理比较简单但是bug巨多,在推推拖拖了好久后,下定决心重新整理成博客,与大家分享! 首先分析一下3D图片轮播的功能需求 ...
用原生JS实现3D轮播效果
用原生JS实现3D轮播效果实现思路: 先实现无缝轮播效果添加3D效果完善代码增加自动轮播效果效果如下: 视图中显示3张图片,并通过CSS的透视和旋转实现3D效果,当无任何操作时,图片自动循环 ...
原生js进阶版轮播图实现(走马灯效果，无缝衔接)
原生js进阶版轮播图实现(走马灯效果,无缝衔接) 利用原生js手写一个轮播图,是上一篇文章的简易版的一个进阶,本次轮播图主要是利用定位和定时器实现了走马灯效果,并且是左右轮播.实现过程与代码也是很简单 ...
php cms 轮播图,原生JS运动实现轮播图
原生JS运动实现轮播图 **基本原理:**通过控制包含n张图片的ul的left值来实现图片自动运动的效果,其中列表中li元素的个数为n,第一个li和最后一个li里存放的图片应为同一张图片,当图片运动到 ...
html原生js实现图片轮播,原生js实现简单轮播图
本文实例为大家分享了js实现简单轮播图的具体代码,供大家参考,具体内容如下一.写入网页基本结构 body: 网页的最外部设置一个id为wrap的容器,取代body,这样方便我们做一些初始化 css: ...
单机按钮来图片轮播_原生js如何实现轮播图效果？
第一种: 这个是之前写的,比较草率,没有注释,如果这个看不懂就去看第二个,比较仔细,主要是了解他,后面都会有一些插件来使用,很方便,只要几行代码就可写出各种各样的代码,所以,不懂的话,不要太在意, 第 ...
使用CSS写正方体，结合JS实现3D轮播图
立体轮播图代码+界面呈现 HTML <div class="pox"><ul class="box"><li class=&qu ...
原生js+css 实现轮播图完整代码
利用原生的js实现轮播图,可以添加到自己的UI库中,在以后的项目中对其进行修改然后添加到已有项目中. 先写出css部分和html部分,直接上代码 <!DOCTYPE html> <h ...
js判断定时器是否启动_原生js如何做出轮播图的效果
<div class="box"><ul><li class="active"><img src="./im ...
原生JS实现小米轮播图和网易云轮播图
文章目录小米轮播图网易云轮播图小米轮播图实现功能: 定时切换(2s) 点击按钮停止切换点击向左向右按钮进行相应切换鼠标点击下方的小圆点,并进行相应的切换效果: 代码如下: <!DO ...

原生js实现3D轮播图

原生js实现3D轮播图相关推荐

最新文章

热门文章