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 相关文章推荐
在视频前插入广告
Nov 20 Javascript
Jquery操作Select 简单方便 一个js插件搞定
Nov 12 Javascript
jquery 跳到顶部和底部动画2句代码简单实现
Jul 18 Javascript
JavaScript Ajax Json实现上下级下拉框联动效果实例代码
Nov 23 Javascript
Node调试工具JSHint的安装及配置教程
May 27 Javascript
浅谈jQuery的offset()方法及示例分享
Jul 17 Javascript
javascript实现页面刷新时自动清空表单并选中的方法
Jul 18 Javascript
jQuery选择器及jquery案例详解(必看)
May 20 Javascript
jQuery表单元素选择器代码实例
Feb 06 Javascript
基于EasyUI的基础之上实现树形功能菜单
Jun 28 Javascript
详解angular脏检查原理及伪代码实现
Jun 08 Javascript
微信小程序实现购物车代码实例详解
Aug 29 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 stream_context_create()函数的使用示例
2015/05/12 PHP
PHP中的常见魔术方法功能作用及用法实例
2015/07/01 PHP
JQuery 学习技巧总结
2010/05/21 Javascript
深入分析jquery解析json数据
2014/12/09 Javascript
jQuery使用toggleClass方法动态添加删除Class样式的方法
2015/03/26 Javascript
jquery表单验证插件(jquery.validate.js)的3种使用方式
2015/03/28 Javascript
jQuery ui实现动感的圆角渐变网站导航菜单效果代码
2015/08/26 Javascript
用原生JS对AJAX做简单封装的实例代码
2016/07/13 Javascript
基于JavaScript实现前端数据多条件筛选功能
2020/08/19 Javascript
react-router4 配合webpack require.ensure 实现异步加载的示例
2018/01/18 Javascript
Vue.js实现大屏数字滚动翻转效果
2019/11/29 Javascript
[00:03]DOTA2新版本PA至宝展示
2014/11/19 DOTA
Python logging模块学习笔记
2014/05/24 Python
python中日期和时间格式化输出的方法小结
2015/03/19 Python
python相似模块用例
2016/03/04 Python
python使用arcpy.mapping模块批量出图
2017/03/06 Python
Django 如何获取前端发送的头文件详解(推荐)
2017/08/15 Python
Python实现获取系统临时目录及临时文件的方法示例
2019/06/26 Python
如何通过Python实现标签云算法
2019/07/02 Python
python 环境搭建 及python-3.4.4的下载和安装过程
2019/07/20 Python
python 解决tqdm模块不能单行显示的问题
2020/02/19 Python
Python object类中的特殊方法代码讲解
2020/03/06 Python
Python matplotlib画图时图例说明(legend)放到图像外侧详解
2020/05/16 Python
Python3.9 beta2版本发布了,看看这7个新的PEP都是什么
2020/06/10 Python
Python爬虫之Selenium库的使用方法
2021/01/03 Python
HTML5之WebGL 3D概述(上)—WebGL原生开发开启网页3D渲染新时代
2013/01/31 HTML / CSS
详解移动端h5页面根据屏幕适配的四种方案
2020/04/15 HTML / CSS
Moda Italia荷兰:意大利男士服装
2019/08/31 全球购物
便利店投资的创业计划书
2014/01/12 职场文书
出国考察邀请函
2014/01/21 职场文书
教师批评与自我批评剖析材料
2014/10/16 职场文书
微信小程序实现拍照和相册选取图片
2021/05/09 Javascript
详解CSS不受控制的position fixed
2021/05/25 HTML / CSS
使用numpy实现矩阵的翻转(flip)与旋转
2021/06/03 Python
Mysql多层子查询示例代码(收藏夹案例)
2022/03/31 MySQL
CSS实现背景图片全屏铺满自适应的3种方式
2022/07/07 HTML / CSS