时间:2021-07-01 10:21:17 帮助过:13人阅读
1、利用位移的方法来实现
首先,我们可以在body中添加一个p并且将宽度设置成百分比(自适应页面),比例具体是相对谁的百分比的话按需求来做,在这里不多说。将图片放入到p 中。
其次,样式部分将img标签全部设置成absolute;以方便定位
最后,js部分说说逻辑,定义两个空数组,第一个数组用来保存初始的显示在页面的图片和等待进入的图片,第二个数组保存其余的n张图片,假设这两个数组分别设置为:waitToShow=[]; 和 goOut=[]; waitToShow.shift();弹出第一张图片假如命名为showFirst,并为showFirst图片设置位移和移动时间,执行完成之后showFirst放入goOut尾部:goOut.push(showFirst); 这时waitToShow数组的第0个元素就变成原来的第二张要显示的图片,给这个图片waitToShow[0]设置位移和移动时间,并且将goOut数组的首元素图片弹出来,在放进waitToShow数组的尾部,保证waitToShow数组永远是一张显示的图片和待显示的图片,这样就通过两个数组形成了一个循环来完成轮播图的实现。反向的逻辑是一样的(由于逻辑过于复杂这里不推荐)
2、利用层级的高低来使最顶部图片变化的做法
直接来代码更直观点:基本每行都有注释
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>轮播图 (闪现 自适应)</title> <style media="screen"> * { margin: 0; padding: 0; } .wrap { width: 60%; background: red; margin: auto; position: relative; } .wrap img { width: 100%; position: absolute; /*z-index: 10;*/ } input { border: 1px solid lightgray; width: 50px; height: 30px; background: red; border-radius: 5px; font-size: 20px; } </style> </head> <body> <p class="wrap"> <img src="img/01.jpg" alt="" /> <img src="img/02.jpg" alt="" /> <img src="img/03.jpg" alt="" /> <img src="img/04.jpg" alt="" /> </p> <input type="button" id="butLeft" name="name" value="◀︎"> <input type="button" id="butRight" name="name" value="▶︎"> </body> <script type="text/javascript"> // 获取images元素生成字符串数组,字符串数组不能进行push pop splice 等操作 // 所以要将它的值重新存放进一个数组中,后面有定义 var images = document.getElementsByTagName('img'); var butLeft = document.getElementById('butLeft'); var butRight = document.getElementById('butRight'); //获取变量index 用来为后面设置层级用 var index = 1000; // 获取一个空的数组,用来存放images里面的字符串元素 var imagess = []; // for循环用来给imagess数组赋值,并且改变数组中的元素的层级 for (var i = 0; i < images.length; i++) { imagess[i] = images[i]; var currentImage = imagess[i]; // 当前图片的层级的设置,一轮for循环都为他们设置了初始的zIndex,图片越靠前,层级设置 // 要求越高,所以用的是-i,这样图片会按顺序从第一张,第二张.....依次向下 currentImage.style.zIndex = -i; } // 设置计数器count,执行一次点击事件(向左或者向右)count加1 var count = 0; // 向左的点击事件 butLeft.onclick = function() { // 从数组头部弹出一个图片元素 var showFirst = imagess.shift(); // 给弹出的这个图片元素设置层级,即 -1000+count, // 让层级相较其他元素是最小的,数组头部弹出的图片会显示在最底层 showFirst.style.zIndex = - index + count; // 层级改变完成后再将他push进数组的尾部 imagess.push(showFirst); // 点击一次加1,不用考虑具体的值,只需要有点击事件加 1 count++; } // 向右点击事件 butRight.onclick = function() { // 从imagess的尾部弹出一个元素,并赋值给showFirst var showFirst = imagess.pop(); // 设置showFirst的层级为最大,1000+count ,这样他会显示在第一层 showFirst.style.zIndex = index + count; // 层级改变之后将他在插入数组imagess的头部 imagess.unshift(showFirst); // 点击一次加1 count++; } </script> </html>
以上就是javascript利用层级高低来实现图片变化代码详解的详细内容,更多请关注Gxl网其它相关文章!