html图片3djs轮播,原生js实现3D轮播图

水深无声 2022-10-06 11:51 248阅读 0赞

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

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

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

上代码：

基本代码：

立体轮播图

.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;

![Image 1][]

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\[i\].index=i;

new\_point\[i\].οnclick=function()\{

for(var k=0;k

imgae\_div\_child\[k\].style.transitionDuration='0.1s';//动画完成

var oldindex=0;

for(var k=0;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的一些总结：

1、注意左右的区分与联系

2、注意连续点击的bug

3、注意切换窗口，切换页面，最小化等这些切换的bug

4、注意代码格式，在js中写css样式时，要注意格式

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

[Image 1]:

html图片3djs轮播,原生js实现3D轮播图

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 3D轮播图

相关 html图片轮播思路,css3如何实现轮播图？css3实现轮播图片的方法

相关轮播图实现html,html、css、js实现轮播图

相关 html js 3d图片轮播,js实现3D图片逐张轮播幻灯片特效代码分享

相关 html图片3djs轮播,原生js实现3D轮播图

相关 html5页面3d滚动轮播,jQuery实现的3D版图片轮播示例【滑动轮播】

相关 html原生js实现图片轮播,原生js实现简单轮播图

相关 html原生js实现图片轮播,原生JS实现图片轮播切换效果

相关图片轮播html原生代码,原生js实现轮播图的示例代码

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