首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

原生js实现3D轮播图

Posted in Javascript onMarch 21, 2020

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.ο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的一些总结：

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

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

原生js实现3D轮播图

- Author -

ICY___

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
获取Javscript执行函数名称的方法
Dec 22 Javascript
JavaScript学习笔记之获取当前目录的实现代码
Dec 14 Javascript
Extjs Label的 fieldLabel和html属性值对齐的方法
Jun 15 Javascript
为JS扩展Array.prototype.indexOf引发的问题及解决办法
Jan 21 Javascript
JS中字符串trim()使用示例
May 26 Javascript
JS正则表达式之非捕获分组用法实例分析
Dec 28 Javascript
jquery ui sortable拖拽后保存位置
Apr 27 jQuery
利用Vue.js实现求职在线之职位查询功能
Jul 03 Javascript
AngularJS双向数据绑定原理之$watch、$apply和$digest的应用
Jan 30 Javascript
Angular5中调用第三方js插件的方法
Feb 26 Javascript
vue实现2048小游戏功能思路详解
May 09 Javascript
关于Vue中的options选项
Mar 22 Vue.js
解决layui弹出层layer的area过大被遮挡的问题
Sep 21 #Javascript
关于layui flow loading占位图的实现方法
Sep 21 #Javascript
layui switch 开关监听 弹出确定状态转换的例子
Sep 21 #Javascript
微信小程序实现3D轮播图效果（非swiper组件）
Sep 21 #Javascript
微信小程序自定义波浪组件使用方法详解
Sep 21 #Javascript
LayUi使用switch开关,动态的去控制它是否被启用的方法
Sep 21 #Javascript
LayUI switch 开关监听 获取属性值、更改状态的方法
Sep 21 #Javascript
人造肉(1) NASA(1) 美国航天局(1) 火星(2) 毅力号(1) 酶(1) 天问一号(1) 大脑(1) 塑料(1) 数据(1)
You might like
PHP+MYSQL开发工具及资源收藏
2007/01/02 PHP
php error_log 函数的使用
2009/04/13 PHP
获取PHP警告错误信息的解决方法
2013/06/03 PHP
php防止sql注入之过滤分页参数实例
2014/11/03 PHP
php利用反射实现插件机制的方法
2015/03/14 PHP
php实现json编码的方法
2015/07/30 PHP
PHP文件操作实例总结
2016/09/27 PHP
php实现的二分查找算法示例
2017/06/20 PHP
PHP mysqli事务操作常用方法分析
2017/07/22 PHP
jQuery Ajax文件上传(php)
2009/06/16 Javascript
js文件中调用js的实现方法小结
2009/10/23 Javascript
导入extjs、jquery 文件时$使用冲突问题解决方法
2014/01/14 Javascript
在Firefox下js select标签点击无法弹出
2014/03/06 Javascript
mvvm双向绑定机制的原理和实现代码(推荐)
2016/06/07 Javascript
老生常谈onBlur事件与onfocus事件(js)
2016/07/09 Javascript
解决前端跨域问题方案汇总
2016/11/20 Javascript
原生JS实现圣旨卷轴展开效果
2017/03/06 Javascript
微信小程序 授权登录详解（附完整源码）
2019/08/23 Javascript
Postman参数化实现过程及原理解析
2020/08/13 Javascript
vue中使用router全局守卫实现页面拦截的示例
2020/10/23 Javascript
[48:56]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 VG vs KG
2018/03/31 DOTA
python 筛选数据集中列中value长度大于20的数据集方法
2018/06/14 Python
基于Python的图像阈值化分割(迭代法)
2020/11/20 Python
CSS3圆角和渐变2种常用功能详解
2016/01/06 HTML / CSS
html5指南-6.如何创建离线web应用程序实现离线访问
2013/01/07 HTML / CSS
3种方式实现瀑布流布局小结
2019/09/05 HTML / CSS
英国领先的电子、技术和办公用品购物网站：Ebuyer
2018/04/04 全球购物
Lookfantastic俄罗斯：欧洲在线化妆品零售商
2019/08/06 全球购物
英国第一的滑雪服装和装备零售商：Snow+Rock
2020/02/01 全球购物
车辆维修工自我评价怎么写
2013/09/20 职场文书
廉政文化进校园广播稿
2014/10/20 职场文书
2014个人年终工作总结范文
2014/12/15 职场文书
慈善募捐倡议书
2015/04/27 职场文书
学校证明范文
2015/06/24 职场文书
2016年大学生暑期社会实践方案
2015/11/26 职场文书
2019最新版劳务派遣管理制度
2019/08/16 职场文书