Html 部分：先写一个盒子，设置id和class，一个列表，然后一个a标签，href属性设置为“JavaScript：；” 因为（javascript:）表示一个伪协议，表示在触发<a>标签时默认动作，执行一段JavaScript代码，而JavaScript：；表示什么都不执行，这样点击<a>时就没有任何反应。href=”javascript: ;”就是去掉a标签的默认行为，跟href=“javascript：void(0)“是一样的，void是JavaScript的一个运算符，void(0)就是什么都不做的意思。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>原生JS层叠图片轮播展示代码 - 站长素材</title> <link type="text/css" href="css/style.css" rel="stylesheet" /> <script type="text/javascript" src="js/tools.js"></script> <script type="text/javascript" src="js/js.js"></script> </head> <body> <div class="wrap" id="wrap"> <ul class="content"></ul> <a href="javascript:;" class="prev"><</a> <a href="javascript:;" class="next">></a> </div> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> </div> </body> </html>
css部分：
body,ul { padding: 0; margin: 0; } ul { list-style: none; } .wrap { position: relative; width: 1200px; height: 360px; margin: 100px auto; } .content { position: absolute; width: 1200px; height: 360px; } .content li{ position: absolute; background-size: 100% 100%; cursor: pointer; } .wrap a { position: absolute; display: none; z-index: 2; top: 50%; width: 60px; height: 60px; margin-top: -30px; font: 36px/60px "宋体"; text-align: center; text-decoration: none; color: #fff; background: rgb(255, 100, 0); background: rgba(255, 100, 0, .6); transition: background 1s ease; } .wrap a:hover { background: rgb(255, 100, 0); } .prev { left: 30px; } .next { right: 30px;
JavaScript部分：window.onload()方法用于在网页加载完毕后立刻执行的操作，即当HTML文档加载完毕后，立刻执行某个方法。通常用于<body>元素，在页面完全载入后（包括图片、css文件等等）执行脚本代码。
1、定义一个数组，将需要轮播的图片放入数组中，这里用path添加图片路径有助于网页优化，
var imgArr=[ {"path":"images/1.jpg"}, {"path":"images/2.jpg"}, {"path":"images/3.jpg"}, {"path":"images/4.jpg"}, {"path":"images/5.jpg"}, {"path":"images/6.jpg"}, {"path":"images/7.jpg"} ];
2、定义一个数组，将放入的图片从左到右分别设置图片的大小，不透明度，在z轴上的定位（即将图片进行分层）。
var size=[ {"top":60,"left":0,"width":400,"height":240,"zIndex":1,"opacity":0}, {"top":60,"left":0,"width":400,"height":240,"zIndex":2,"opacity":40}, {"top":30,"left":150,"width":500,"height":300,"zIndex":3,"opacity":70}, {"top":0,"left":300,"width":600,"height":360,"zIndex":4,"opacity":100}, {"top":30,"left":550,"width":500,"height":300,"zIndex":3,"opacity":70}, {"top":60,"left":800,"width":400,"height":240,"zIndex":2,"opacity":40}, {"top":60,"left":800,"width":400,"height":240,"zIndex":1,"opacity":0} ];3、
定义一个变量，对放入的图片的数量进行存储，
定义一个变量，获取网页中盒子的id属性，
定义一个变量，获取盒子中的第一个子元素节点，
定义一个变量，获取盒子中的<a>标签
定义一个变量，用于判断点击事件
定义一个变量，用于记录轮播图在不点击时图片多长时间换下一张。
var imgSum=imgArr.length; var wrap=document.getElementById('wrap'); var cont=wrap.firstElementChild || wrap.firstChild; var btnArr=wrap.getElementsByTagName('a'); var falg=true; var speed=7000;
当鼠标移入时，给a添加一个block属性，并清除轮播图的定时器
wrap.onmouseover=function(){ for (var i=0;i<btnArr.length;i++) { btnArr[i].style.display='block'; } clearInterval(wrap.timer); }当鼠标移出时，给a添加一个none属性，应启动轮播图的定时器
wrap.onmouseout=function(){ for (var i=0;i<btnArr.length;i++) { btnArr[i].style.display='none'; } wrap.timer=setInterval(function(){ move(true); },speed); }
循环遍历添加的图片，添加一个节点（标签li），给这个节点设置背景，
lis.style.backgroundImage='url('+imgArr[i].path+')';将之前添加的图片作为背景，并按照遍历的顺序进行添加
将这个图片节点添加入li这个标签上
for (var i=0;i<imgSum;i++) { var lis=document.createElement('li'); // lis.style.cssText='top:'+size[i].top+'px;'+'left:'+size[i].left+'px;'+'width:'+size[i].width+'px;'+'z-index:'+size[i].zIndex+';'+'height:' // +size[i].height+'px;'+'opacity:'+size[i].opacity+';'; lis.style.backgroundImage='url('+imgArr[i].path+')'; cont.appendChild(lis); }
定义一个变量存储返回所有元素节点
调用函数move
设计一个定时器，setInterval(function(){
move(true);
},speed);
判断点击标签时，如果点击的时第二张图，执行定时器，
如果点击的时当下的第一张图，则不执行定时器
var liArr=cont.children; move(); wrap.timer=setInterval(function(){ move(true); },speed); btnArr[1].onclick=function(){ if (falg) { move(true); } } btnArr[0].onclick=function(){ if (falg) { move(false); } }move函数：if判断，如何bool参数有值，执行下一步，如果bool的值为真，向数组size开头添加一个数组方法，并删除数组的最后一个元素。如果为假，在末尾添加一个数组，并删除数组的第一个元素
循环遍历新数组长度，用animate方法让新数组由旧数组改变到新数组的过程中产生动画效果，并在每一次变化后给falg恢复初始状态
function move(bool){ if(bool!=undefined){ if(bool){ size.unshift(size.pop()); }else { size.push(size.shift()); } } for (var i=0;i<liArr.length;i++) { animate(liArr[i],size[i],function(){ falg=true; }); } }
tool.js部分：
创建一个函数判断运用的是什么浏览器，obj.currentStyle.property表示在IE中获取元素属性值的方法，window.getComputedStyle(obj,null).ptopety
function getStyle(obj,attr){ return obj.currentStyle ? obj.currentStyle[attr] : window.getComputedStyle(obj,null)[attr]; }
对定时器进行清零操作，
对定时器进行设置，遍历json这个对象，
判断如果k值得到的是不透明度（opacity）的值，则将其设为需要显示的大小，否则，将其变为整数，
if (getStyle(obj,k)==undefined) {
leader=100;
}else {
leader=parseInt(getStyle(obj,k)*100);
}
如果k值不是不透明度的值，则将其清零。
这段代码是为了改变图片在z轴上的距离与图片大小，
if(k=='zIndex'){ obj.style[k]=json[k]; }else if(k=='opacity'){ obj.style[k]=leader/100; obj.style.filter='alpha(opacity='+leader+')'; }else { obj.style[k]=leader+'px'; } if(json[k]!=leader){ bool=false; }
将定时器的效果给清零
tool.js整合代码：
function getStyle(obj,attr){ return obj.currentStyle ? obj.currentStyle[attr] : window.getComputedStyle(obj,null)[attr]; } function animate(obj,json,fn){ clearInterval(obj.timer); obj.timer=setInterval(function(){ var bool=true; for(var k in json){ var leader; if (k=='opacity') { if (getStyle(obj,k)==undefined) { leader=100; }else { leader=parseInt(getStyle(obj,k)*100); } }else { leader=parseInt(getStyle(obj,k)) || 0; } var step=(json[k]-leader)/10; step=step>0?Math.ceil(step):Math.floor(step); leader=leader+step; if(k=='zIndex'){ obj.style[k]=json[k]; }else if(k=='opacity'){ obj.style[k]=leader/100; obj.style.filter='alpha(opacity='+leader+')'; }else { obj.style[k]=leader+'px'; } if(json[k]!=leader){ bool=false; } } if(bool){ clearInterval(obj.timer); if (fn) { fn(); } } },10); }
希望各位大佬指出不对的地方，虚心求教
3562
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
