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


Posted in Javascript onJanuary 17, 2020

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

实现轮播图

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

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

HTML代码:

<div class="fate">
 <div class="lancer">
 <ul class="saber">
  <li><img src="img/illust_13010631_20191118_150928.jpg"></li>
  <li><img src="img/illust_13010631_20191118_150928.jpg"></li>
   <li><img src="img/illust_13010631_20191118_150928.jpg"></li>
   <li><img src="img/illust_13010631_20191118_150928.jpg"></li>
   <li><img src="img/illust_13010631_20191118_150928.jpg"></li>
  </ul>
  </div>
 </div>
 <div class="archer">
  <button class="goup" onclick="goup()"><</button> 
  <button class="godown" onclick="godown()">></button>
</div>

CSS代码:

* {
 transition: all 1s;
 margin: 0px;
 padding: 0px;
}

.fate {
 position: absolute;
 top: 0%;
 width: 512px;
 height: 512px;
 overflow: hidden;
}

ul li {
 list-style: none;
}
.lancer{
 position: absolute;
 top: 0%;
 width: 100%;
 height: 100%;
}
.saber {
 top: 0px;
 position: absolute;
}
.archer{
 position: absolute;
}
button {
 z-index: 99;
}

JS代码:

var index=0;
function godown(){
  var li = document.getElementsByTagName("li");
 //获取单个li宽度(单张图片高度)
 var liHeight = li[0].scrollHeight;
  
 var goup=document.getElementsByClassName("goup");
 var lancer=document.getElementsByClassName("lancer")[0];
 if(index<4){
  index++;
  }else{
    index=0;
  }
  lancer.style.top = -index*liHeight+"px";
  }
function goup(){
 var li = document.getElementsByTagName("li");
  //获取单个li宽度(单张图片高度)
  var liHeight = li[0].scrollHeight;
  
  var goup=document.getElementsByClassName("goup");
  var lancer=document.getElementsByClassName("lancer")[0];
  if(index>0){
   index--;
  }else{
  index=4;
 }
 lancer.style.top = -index*liHeight+"px";
}

如有错误望指出。

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

<div class="fate">
    <div class="saber">
      <ul>
        <li class="archer active"><img src="img/illust_13010631_20191118_150928.jpg"></li>
        <li class="archer"><img src="img/illust_13010631_20191118_150928.jpg"></li>
        <li class="archer"><img src="img/illust_13010631_20191118_150928.jpg"></li>
        <li class="archer"><img src="img/illust_13010631_20191118_150928.jpg"></li>
        <li class="archer"><img src="img/illust_13010631_20191118_150928.jpg"></li>
      </ul>
    </div>
  </div>
  <div class="lancer">
    <button id="goup">></button>
    <button id="godown"><</button>
</div>

CSS代码

li {
      list-style: none;
    }
    
    .archer {
      position: absolute;
      top: 0%;
      display: none;
    }
    
    .active {
      display: block;
    }
    
    button {
      position: absolute;
      top: 70%;
      width: 50px;
    }
    
    #goup {
      left: 400px;
    }
    
    #godown {
      left: 0px;
    }

JS代码

var pic = document.getElementsByTagName("li");
    var archer = document.getElementsByClassName("archer");
    var goup = document.getElementById("goup");
    var godown = document.getElementById("godown");
    var index = 0;
    goup.onclick = function() {
      for (var i = 0; i < pic.length; i++) {
        pic[i].className = "archer";
      }
      if (index < 4) {
        index++;
      } else {
        index = 0;
      }
      pic[index].className = "active";

    }
    godown.onclick = function() {
      for (var i = 0; i < pic.length; i++) {
        pic[i].className = "archer";
      }
      if (index > 0) {
        index--;
      } else {
        index = 4;
      }
      pic[index].className = "active";

    }

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

结语

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

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

Javascript 相关文章推荐
用JavaScript实现单继承和多继承的简单方法
Mar 29 Javascript
JS图片浏览组件PhotoLook的公开属性方法介绍和进阶实例代码
Nov 09 Javascript
jQuery实现form表单reset按钮重置清空表单功能
Dec 18 Javascript
JS隐藏参数post传值实例
Apr 18 Javascript
JavaScript你不知道的一些数组方法
Aug 18 Javascript
JS实现定时任务每隔N秒请求后台setInterval定时和ajax请求问题
Oct 15 Javascript
JavaScript基于面向对象实现的猜拳游戏
Jan 03 Javascript
vue.js使用watch监听路由变化的方法
Jul 08 Javascript
JavaScript设计模式之构造器模式(生成器模式)定义与用法实例分析
Jul 26 Javascript
支付宝小程序tabbar底部导航
Nov 06 Javascript
layui加载表格,绑定新增,编辑删除,查看按钮事件的例子
Sep 06 Javascript
axios实现文件上传并获取进度
Mar 25 Javascript
js键盘事件实现人物的行走
Jan 17 #Javascript
javascript实现简易的计算器
Jan 17 #Javascript
JavaScript简易计算器制作
Jan 17 #Javascript
vue下axios拦截器token刷新机制的实例代码
Jan 17 #Javascript
js布局实现单选按钮控件
Jan 17 #Javascript
vue 查看dist文件里的结构(多种方式)
Jan 17 #Javascript
JavaScript数组去重实现方法小结
Jan 17 #Javascript
You might like
PHP用strstr()函数阻止垃圾评论(通过判断a标记)
2013/09/28 PHP
PHP5.2下preg_replace函数的问题
2015/05/08 PHP
PHP 返回数组后处理方法(开户成功后弹窗提示)
2017/07/03 PHP
javascript实现的动态添加表单元素input,button等(appendChild)
2007/11/24 Javascript
js中定义一个变量并判断其是否为空的方法
2014/05/13 Javascript
js实现圆盘记速表
2015/08/03 Javascript
JS实现点击按钮控制Div变宽、增高及调整背景色的方法
2015/08/05 Javascript
javascript事件委托的用法及其好处简析
2016/04/04 Javascript
基于react组件之间的参数传递(详解)
2017/09/05 Javascript
Vue中封装input组件的实例详解
2017/10/17 Javascript
解决vue 引入子组件报错的问题
2018/09/06 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【凹多边形的分离轴检测算法】
2018/12/13 Javascript
解决layui表格内文本超出隐藏的问题
2019/09/12 Javascript
vue使用高德地图点击下钻上浮效果的实现思路
2019/10/12 Javascript
vue - props 声明数组和对象操作
2020/07/30 Javascript
Vue双向数据绑定(MVVM)的原理
2020/10/03 Javascript
[54:10]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
[01:57]2018年度DOTA2最具潜力解说-完美盛典
2018/12/16 DOTA
让python json encode datetime类型
2010/12/28 Python
python操作redis的方法
2015/07/07 Python
python中matplotlib实现最小二乘法拟合的过程详解
2017/07/11 Python
Python机器学习之scikit-learn库中KNN算法的封装与使用方法
2018/12/14 Python
Python实现的读取文件内容并写入其他文件操作示例
2019/04/09 Python
python之拟合的实现
2019/07/19 Python
python找出因数与质因数的方法
2019/07/25 Python
用OpenCV将视频分解成单帧图片,图片合成视频示例
2019/12/10 Python
python根据字典的键来删除元素的方法
2020/08/16 Python
python实现人工蜂群算法
2020/09/18 Python
蹦床仓库:Trampoline Warehouse
2018/12/06 全球购物
双立人加拿大官网:Zwilling加拿大
2020/08/10 全球购物
会计专业毕业生自我评价
2013/09/25 职场文书
五五普法心得体会
2014/09/04 职场文书
培训督导岗位职责
2015/04/10 职场文书
Vue过滤器(filter)实现及应用场景详解
2021/06/15 Vue.js
idea 在springboot中使用lombok插件的方法
2021/08/02 Java/Android
详解Spring Security如何在权限中使用通配符
2022/06/28 Java/Android