js实现轮播图效果 z-index实现轮播图

前端之家收集整理的这篇文章主要介绍了js实现轮播图效果 z-index实现轮播图前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文实例为大家分享了js实现轮播图效果的具体代码,供大家参考,具体内容如下

实现轮播图

学习前端差不多两三个月,在这里记录分享一下。因本人菜鸟一枚,希望大佬们多多指点,勿喷。

通过计算每一张图片高度实现滑动轮播图

HTML代码

  1. <div class="fate">
  2. <div class="lancer">
  3. <ul class="saber">
  4. <li><img src="img/illust_13010631_20191118_150928.jpg"></li>
  5. <li><img src="img/illust_13010631_20191118_150928.jpg"></li>
  6. <li><img src="img/illust_13010631_20191118_150928.jpg"></li>
  7. <li><img src="img/illust_13010631_20191118_150928.jpg"></li>
  8. <li><img src="img/illust_13010631_20191118_150928.jpg"></li>
  9. </ul>
  10. </div>
  11. </div>
  12. <div class="archer">
  13. <button class="goup" onclick="goup()"><</button>
  14. <button class="godown" onclick="godown()">></button>
  15. </div>

CSS代码

  1. * {
  2. transition: all 1s;
  3. margin: 0px;
  4. padding: 0px;
  5. }
  6.  
  7. .fate {
  8. position: absolute;
  9. top: 0%;
  10. width: 512px;
  11. height: 512px;
  12. overflow: hidden;
  13. }
  14.  
  15. ul li {
  16. list-style: none;
  17. }
  18. .lancer{
  19. position: absolute;
  20. top: 0%;
  21. width: 100%;
  22. height: 100%;
  23. }
  24. .saber {
  25. top: 0px;
  26. position: absolute;
  27. }
  28. .archer{
  29. position: absolute;
  30. }
  31. button {
  32. z-index: 99;
  33. }

JS代码

  1. var index=0;
  2. function godown(){
  3. var li = document.getElementsByTagName("li");
  4. //获取单个li宽度(单张图片高度)
  5. var liHeight = li[0].scrollHeight;
  6.  
  7. var goup=document.getElementsByClassName("goup");
  8. var lancer=document.getElementsByClassName("lancer")[0];
  9. if(index<4){
  10. index++;
  11. }else{
  12. index=0;
  13. }
  14. lancer.style.top = -index*liHeight+"px";
  15. }
  16. function goup(){
  17. var li = document.getElementsByTagName("li");
  18. //获取单个li宽度(单张图片高度)
  19. var liHeight = li[0].scrollHeight;
  20.  
  21. var goup=document.getElementsByClassName("goup");
  22. var lancer=document.getElementsByClassName("lancer")[0];
  23. if(index>0){
  24. index--;
  25. }else{
  26. index=4;
  27. }
  28. lancer.style.top = -index*liHeight+"px";
  29. }

如有错误望指出。

利用z-index实现轮播图
HTML代码

  1. <div class="fate">
  2. <div class="saber">
  3. <ul>
  4. <li class="archer active"><img src="img/illust_13010631_20191118_150928.jpg"></li>
  5. <li class="archer"><img src="img/illust_13010631_20191118_150928.jpg"></li>
  6. <li class="archer"><img src="img/illust_13010631_20191118_150928.jpg"></li>
  7. <li class="archer"><img src="img/illust_13010631_20191118_150928.jpg"></li>
  8. <li class="archer"><img src="img/illust_13010631_20191118_150928.jpg"></li>
  9. </ul>
  10. </div>
  11. </div>
  12. <div class="lancer">
  13. <button id="goup">></button>
  14. <button id="godown"><</button>
  15. </div>

CSS代码

  1. li {
  2. list-style: none;
  3. }
  4.  
  5. .archer {
  6. position: absolute;
  7. top: 0%;
  8. display: none;
  9. }
  10.  
  11. .active {
  12. display: block;
  13. }
  14.  
  15. button {
  16. position: absolute;
  17. top: 70%;
  18. width: 50px;
  19. }
  20.  
  21. #goup {
  22. left: 400px;
  23. }
  24.  
  25. #godown {
  26. left: 0px;
  27. }

JS代码

  1. var pic = document.getElementsByTagName("li");
  2. var archer = document.getElementsByClassName("archer");
  3. var goup = document.getElementById("goup");
  4. var godown = document.getElementById("godown");
  5. var index = 0;
  6. goup.onclick = function() {
  7. for (var i = 0; i < pic.length; i++) {
  8. pic[i].className = "archer";
  9. }
  10. if (index < 4) {
  11. index++;
  12. } else {
  13. index = 0;
  14. }
  15. pic[index].className = "active";
  16.  
  17. }
  18. godown.onclick = function() {
  19. for (var i = 0; i < pic.length; i++) {
  20. pic[i].className = "archer";
  21. }
  22. if (index > 0) {
  23. index--;
  24. } else {
  25. index = 4;
  26. }
  27. pic[index].className = "active";
  28.  
  29. }

利用index来实现轮播,但是生硬。

结语

以上就是两种方法实现轮播图效果

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

猜你在找的JavaScript相关文章