JavaScript面向对象编程之双向链表结构实现立体轮播图效果

2019独角兽企业重金招聘Python工程师标准>>>

1 静止时

2 旋转时

3 原理简介：

其实就是一个节点往另一个节点状态转换的过程。注意一点：向左时。最右边的z-index必须比最左变的z-index大。

向左移动时，最左边的z-index必须比最右变的z-index的大。任意时刻，只能看到3张图片。

在移动时，先改变z-index属性，再调用jquery的动画函数。

4 源码实现：

这里依赖一个jquery2.0.js的animate函数。可以导入一个支持该函数版本的jquery库。

<!DOCTYPE HTML>
<html><head><script src="jquery2.0.js"></script><style type="text/css">.bgimg{position:absolute;border:1px solid black;}    .bgimg:nth-child(1){background:red;}.bgimg:nth-child(2){background:green;}.bgimg:nth-child(3){background:blue;}.bgimg:nth-child(4){background:yellow;}#container{position:relative;left:0px;top:0px;width:1200px;height:400px;overflow:hidden;border:1px solid black;margin:50px auto;}</style></head><body><div id="container"></div><div align="center"><button onclick="moveLeft()">向左</button><button  onclick="moveRight()">向右</button></div><script>var cNode = null;//当前节点。$(document).ready(function(){init();});// cNode --> nextfunction moveLeft(){//在切换之前。务必判断。cNode.next.zIndex > cNode.pre.zIndex 。如果不大于。要交换。if( cNode.next.zIndex < cNode.pre.zIndex){var ind = cNode.next.zIndex;cNode.next.zIndex = cNode.pre.zIndex;cNode.pre.zIndex = ind;}//先改层次。var index = cNode.zIndex;var next = cNode;for(var i=0;i<3;i++){next.zIndex = next.next.zIndex;next.div.css("z-index", next.zIndex);next = next.next;}next.zIndex = index;next.div.css("z-index", next.zIndex);//再改动画。var css = $.extend(cNode.style,{});next = cNode;for(var i=0;i<3;i++){   next.style = $.extend(next.next.style,{});next.div.animate(next.style,1000);next = next.next;}next.style = css;next.div.animate(next.style,1000);cNode = cNode.pre;}// cNode --> prefunction moveRight(){//在切换之前。务必判断。cNode.next.zIndex < cNode.pre.zIndex 。如果不大于。要交换。if( cNode.next.zIndex > cNode.pre.zIndex){var ind = cNode.next.zIndex;cNode.next.zIndex = cNode.pre.zIndex;cNode.pre.zIndex = ind;}//先改层次。var index = cNode.zIndex;var pre = cNode;for(var i=0;i<3;i++){pre.zIndex = pre.pre.zIndex;pre.div.css("z-index", pre.zIndex);pre = pre.pre;}pre.zIndex = index;pre.div.css("z-index", pre.zIndex);//再改动画。var css = $.extend(cNode.style,{});pre = cNode;for(var i=0;i<3;i++){   pre.style = $.extend(pre.pre.style,{});pre.div.animate(pre.style,1000);pre = pre.pre;}pre.style = css;pre.div.animate(pre.style,1000);cNode = cNode.next;}function init(){cNode = new ImageNode("00");for(var i=1;i<=3;i++){cNode.add( new ImageNode(i+""+i));}var divs=[];for(var i=0;i<4;i++){divs[i]=$("<div class='bgimg'></div>");$("#container").append(divs[i]);}var next = cNode;//1 next.div = divs[0];next.style={width:"800px",height:"400px",top:"0px",left:"200px",zIndex:4};next.zIndex = 4;//2next = next.next;next.div = divs[1];next.style={width:"800px",height:"300px",top:"50px",left:"-400px",zIndex:3};next.zIndex = 3;//3next = next.next;next.div = divs[2];next.style={width:"800px",height:"300px",top:"50px",left:"200px",zIndex:1};next.zIndex = 1;//4next = next.next;next.div = divs[3];next.style={width:"800px",height:"300px",top:"50px",left:"800px",zIndex:2};next.zIndex = 2;var next = cNode;for(var i=0;i<4;i++){next.div.css(next.style);next = next.next;}}ImageNode.prototype.data={nodeNum:1};/**节点类。 new ImageNode();*/function ImageNode(name){this.isfirst = false;this.islast = false;this.pre = null;this.next = null;this.name = name;this.style={};//存储height，left，top，this.zIndex =0;this.div = null;//存储每个节点对应的divjquery对象。//尾部添加。this.add=function(N){this.data.nodeNum ++;if(this.data.nodeNum == 2 ){this.isfirst = true;}//找尾。var last_node = null;var current_node = this;while(true){last_node = current_node.next;if(last_node ==null){last_node = current_node;break;}else{if(last_node.islast)break;current_node = last_node;}}N.pre=last_node;//尾的上一个是旧尾。last_node.next = N;//旧尾的下一个是新尾。//更换标志位。N.islast = true;last_node.islast = false;//找头。var first_node = null;var current_node = this;while(true){first_node = current_node.pre;if(first_node == null){first_node = current_node;break;}else{if( first_node.isfirst)break;current_node = first_node;}}//新尾的下一个是首。N.next = first_node;//首的上一个是新尾。first_node.pre = N;}}</script></body>
</html>

转载于:https://my.oschina.net/lightled/blog/1925311

JavaScript面向对象编程之双向链表结构实现立体轮播图效果相关推荐

JavaScript使用改变scrollLeft的值做轮播图效果
前言今天学了一个使用scrollLeft改变溢出的值的方法做的轮播图,没有做全只做了轮播的效果,自己觉得这个轮播图并不好用(也是我菜),内容不多就不一步步讲解了,不懂得可以看看注释 <!DOC ...
原生JavaScript轮播图效果实现
原生JavaScript实现轮播图切换效果的实现过程本文所用代码仅供个人学习.此部分代码系按原腾讯电脑管家首页的轮播图效果,采用原生JS技术予以实现(原网页采用jQurey等技术). 1. 文件准备 ...
php自动轮播图代码,JavaScript如何实现动态轮播图效果？（代码示例）
本篇文章给大家带来的内容是JavaScript如何实现动态轮播图效果?(代码示例).有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 功能描述: 1.鼠标经过左右侧箭头显示,鼠标离开 ...
用JavaScript实现网页无限轮播图效果，附整套源码
用JavaScript实现无限轮播图效果(附源码) javascript群内每日课题-今日课题:用JavaScript实现无限轮播图效果 PS:很多企业通用的案例自己再学习过程中肯定是要熟练的,所以今 ...
HTML+CSS+JavaScript实现轮播图效果
前言先奉上本文需要的所有资源,免费下载,代码有详细注释,可搭配本文使用: 前端JavaScript实现轮播图效果百度网盘:百度网盘请输入提取码提取码:slbt 没有添加动画效果,添加了自动切换 ...
html动态轮播效果怎么做,详解JavaScript实现动态的轮播图效果
利用javascript能实现常见的动态的网页轮播图效果,如下图1所示: 图1 实现该轮播图有以下几个要点: (1)在左右两侧各有一个箭头,分别指的是向左和向右切换,即点击相应的位置就会切换到该图片之 ...
用jQuery实现轮播图效果（自动播放，能手动切换）
大家好,今天我和大家分享一下轮播图的实现,下面是我做的轮播图效果首先我们看到,它是由背景图片.方向图标和指示器组成.**我们发现背景图片.方向图标和指示器是层叠在一起的,所以布局时我们要用绝对定位. ...
html中间大两边小轮播代码,vue使用swiper实现中间大两边小的轮播图效果
项目中使用的vue,刚好有需求要实现轮播图,突出显示当前图片,两边展示其他图片:通过查各种资料,实现了,故在此记录下来下面我们来看下实现步骤: 第一步:首先在项目index.html中引入swipe ...
高仿阴阳师官网轮播图效果的jQuery插件
代码地址如下: http://www.demodashi.com/demo/12302.html 插件介绍这是一个根据阴阳师官网的轮播效果所扒下来的轮播插件,主要应用于定制个性化场景,目前源码完全公 ...
【微信小程序】小程序实现轮播图效果--swiper组件(一步步教你如何实现)
文章目录前言 1.引入外部链接图片资源 2.让swiper来调整适应图片的宽高 3.实现轮播效果--autoplay 总结欢迎点赞,收藏,加关注前言此例子是用微信小程序组件swiper来实现轮 ...

JavaScript面向对象编程之双向链表结构实现立体轮播图效果

JavaScript面向对象编程之双向链表结构实现立体轮播图效果相关推荐

最新文章

热门文章