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 相关文章推荐
解决extjs在firefox中关闭窗口再打开后iframe中js函数访问不到的问题
Nov 06 Javascript
HTML5之lang属性与dir属性的详解
Jun 19 Javascript
jQuery中prevAll()方法用法实例
Jan 08 Javascript
JavaScript判断浏览器类型的方法
Feb 10 Javascript
kindeditor编辑器点中图片滚动条往上顶的bug
Jul 05 Javascript
使用requirejs模块化开发多页面一个入口js的使用方式
Jun 14 Javascript
jQuery与vue实现拖动验证码功能
Jan 30 jQuery
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
Apr 17 jQuery
vue axios基于常见业务场景的二次封装的实现
Sep 21 Javascript
node app 打包工具pkg的具体使用
Jan 17 Javascript
详解Vue路由自动注入实践
Apr 17 Javascript
使用js获取身份证年龄的示例代码
Dec 11 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
浅析ThinkPHP中的pathinfo模式和URL重写
2014/01/06 PHP
Thinkphp中的curd应用实用要点
2015/01/04 PHP
PHP微信发送推送消息乱码的解决方法
2019/02/28 PHP
定位地理位置PHP判断员工打卡签到经纬度是否在打卡之内
2019/05/23 PHP
Javascript中的isNaN函数使用说明
2011/11/10 Javascript
关于extjs4如何获取grid修改后的数据的问题
2013/08/07 Javascript
jQuery实现DIV层收缩展开的方法
2015/02/27 Javascript
JS实现黑客帝国文字下落效果
2015/09/01 Javascript
Windows下Node.js安装及环境配置方法
2017/09/18 Javascript
bootstrap table实现合并单元格效果
2018/12/24 Javascript
ES6基础之默认参数值
2019/02/21 Javascript
浅谈layer弹出层按钮颜色修改方法
2019/09/11 Javascript
JS中自定义事件的使用与触发操作实例分析
2019/11/01 Javascript
vue调用微信JSDK 扫一扫,相册等需要注意的事项
2021/01/03 Vue.js
[01:00:25]NB vs Secret 2018国际邀请赛小组赛BO1 B组加赛 8.19
2018/08/21 DOTA
python益智游戏计算汉诺塔问题示例
2014/03/05 Python
分享15个最受欢迎的Python开源框架
2014/07/13 Python
Django与遗留的数据库整合的方法指南
2015/07/24 Python
Python连接DB2数据库
2016/08/27 Python
利用Hyperic调用Python实现进程守护
2018/01/02 Python
Python之ReportLab绘制条形码和二维码的实例
2018/01/15 Python
python 拼接文件路径的方法
2018/10/23 Python
PyQt5下拉式复选框QComboCheckBox的实例
2019/06/25 Python
python networkx 根据图的权重画图实现
2019/07/10 Python
Python实现像awk一样分割字符串
2020/09/15 Python
Python 生成短8位唯一id实战教程
2021/01/13 Python
利用css3实现的简单的鼠标悬停按钮
2014/11/04 HTML / CSS
HTML5制作酷炫音频播放器插件图文教程
2014/12/30 HTML / CSS
Mytheresa美国官网:德国知名的女性奢侈品电商
2017/05/27 全球购物
华为的Java面试题
2014/03/07 面试题
介绍一下mysql的日期和时间函数
2013/03/28 面试题
讲文明树新风演讲稿
2014/05/12 职场文书
制冷与空调专业毕业生推荐信
2014/07/07 职场文书
大学生交通专业求职信
2014/09/01 职场文书
25张裸眼3D图片,带你重温童年的记忆,感受3D的魅力
2022/02/06 杂记
Python中生成随机数据安全性、多功能性、用途和速度方面进行比较
2022/04/14 Python