JS实现小米轮播图


Posted in Javascript onSeptember 21, 2020

原生JS仿小米轮播图(最新版易懂),供大家参考,具体内容如下

本次内容主要可实现的效果:

  • 自动轮播
  • 可点击上一张 下一张进行图片的切换
  • 点击右下方小圆点进行图片切换

代码部分:

H5:

<div class="wrap">
    <ul class="list">
      <li class="item active"><img src="img/001.jpg" alt=""></li>
      <li class="item"><img src="img/002.jpg"" alt=""></li>
      <li class="item"><img src="img/001.jpg" alt=""></li>
      <li class="item"><img src="img/002.jpg" alt=""></li>
      <li class="item"><img src="img/001.jpg" alt=""></li>
    </ul>
    <!-- 小圆点 -->
    <ul class="pointList">
      <li class="point active" data-index="0"></li>
      <li class="point" data-index="1"></li>
      <li class="point"data-index="2"></li>
      <li class="point"data-index="3"></li>
      <li class="point"data-index="4"></li>
    </ul>
    <button type="button" class="btn" id="goPre"><</button>
    <button type="button" class="btn" id="goNext">></button>
</div>

CSS部分:

<style>
    .wrap {
      width: 800px;
      height: 400px;
      position: relative;
    }

    .list {
      width: 800px;
      height: 400px;
      list-style: none;
      position: relative;
      padding-left: 0px;
    }

    .item {
      position: absolute;
      width: 100%;
      height: 100%;
      color: white;
      font-size: 50px;
      opacity: 0.6;
      transform: all .8s;
    }
    .item img{
      width: 800px;
      height: 400px;
    }
    .btn {
      width: 50px;
      height: 100px;
      position: absolute;
      top: 150px;
      z-index: 100;
    }

    #goPre {
      left: 0px;
    }

    #goNext {
      right: 0px;
    }

    .item.active {
      opacity: 1;
      z-index: 10;
    }

    .pointList{
      padding-left: 0;
      list-style: none;
      position: absolute;
      right: 20px;
      bottom: 20px;
      z-index: 1000;
    }
    .point{
      width: 10px;
      height: 10px;
      background-color: rgba(0,0,0,0.4);
      border-radius: 50%;
      float: left;
      margin-right: 16px;
      border-style: solid;
      border-width: 2px;
      border-color: rgba(255,255,255, 0.6);
      cursor: pointer;
    }
    .point.active{
      background-color: rgba(255,255,255,0.4);
    }
</style>

JS部分

<script>
    //获取节点
    var items = document.getElementsByClassName('item')//图片
    var goPreBtn = document.getElementById('goPre');
    var goNextBtn = document.getElementById('goNext');
    //获取点
    var points=document.getElementsByClassName('point');

   var time=0;//定时器图片跳转参数

    var index = 0; //表示第几张图片在展示
    //可以展示第几个点

    var clearActive=function(){
      for(var i=0;i<items.length;i++){
        items[i].className='item';
        points[i].className='point';
      }
    }

    var goIndex=function(){
      clearActive();
      items[index].className='item active';
      points[index].className='point active';
    }

    var goNext=function(){
      if(index<4){
        index++;
      }else{
        index=0;
      }
      goIndex();
    }
    var goPre=function(){
      if(index==0){
        index=4;
      }else{
        index--;
      }
      goIndex();
    }

    //点击下一张切换图片
    goNextBtn.addEventListener('click' ,function(){
      goNext();
      time=0;
    })
  //点击上一张进行切换图片
    goPreBtn.addEventListener('click' ,function(){
      goPre();
      time=0;
    })

   for(var i=0;i<points.length;i++){
    points[i].addEventListener('click',function(){
      var pointIndex=this.getAttribute('data-index');
      index=pointIndex;
      goIndex();
      time=0;
    })
   }
   
  //自动轮播定时器
  setInterval(function(){
    time++;
    if(time==20){
      goNext();
      time=0;
    } 
  },100)
</script>

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

Javascript 相关文章推荐
Javascript JSQL,SQL无处不在,
May 05 Javascript
jQuery EasyUI API 中文文档 - Panel面板
Sep 30 Javascript
基于jQuery选择器的整理集合
Apr 26 Javascript
jQuery中:lt选择器用法实例
Dec 29 Javascript
Window.Open打开窗体和if嵌套代码
Apr 15 Javascript
基于jquery实现三级下拉菜单
May 10 Javascript
页面向下滚动ajax获取数据的实现方法(兼容手机)
May 24 Javascript
AngularJS国际化详解及示例代码
Aug 18 Javascript
AngularJS前端页面操作之用户修改密码功能示例
Mar 27 Javascript
微信小程序 功能函数小结(手机号验证*、密码验证*、获取验证码*)
Dec 08 Javascript
基于VUE实现的九宫格抽奖功能
Sep 30 Javascript
angular中的post请求处理示例详解
Jun 30 Javascript
vue 里面的 $forceUpdate() 强制实例重新渲染操作
Sep 21 #Javascript
vue组件入门知识全梳理
Sep 21 #Javascript
Ajax获取node服务器数据的完整步骤
Sep 20 #Javascript
微信小程序获取当前时间及星期几的实例代码
Sep 20 #Javascript
vue操作dom元素的3种方法示例
Sep 20 #Javascript
npm ci命令的基本使用方法
Sep 20 #Javascript
js面试题之异步问题的深入理解
Sep 20 #Javascript
You might like
php使用百度天气接口示例
2014/04/22 PHP
浅谈PHP中的数据传输CURL
2016/09/06 PHP
PHP实现基于面向对象的mysqli扩展库增删改查操作工具类
2017/07/18 PHP
PHP策略模式定义与用法示例
2017/07/27 PHP
jQuery使用手册之 事件处理
2007/03/24 Javascript
nodejs中操作mysql数据库示例
2014/12/20 NodeJs
js评分组件使用详解
2017/06/06 Javascript
javascript、php关键字搜索函数的使用方法
2018/05/29 Javascript
Node.js 路由的实现方法
2019/06/05 Javascript
js中apply和call的理解与使用方法
2019/11/27 Javascript
解决Vue 给mapState中定义的属性赋值报错的问题
2020/06/22 Javascript
Vue+Java+Base64实现条码解析的示例
2020/09/23 Javascript
[03:10]2014DOTA2 TI马来劲旅Titan首战告捷目标只是8强
2014/07/10 DOTA
[33:39]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第二局
2016/02/27 DOTA
Python 字符串定义
2009/09/25 Python
Python3.0与2.X版本的区别实例分析
2014/08/25 Python
Queue 实现生产者消费者模型(实例讲解)
2017/11/13 Python
PyQt5 QTableView设置某一列不可编辑的方法
2019/06/25 Python
python通过链接抓取网站详解
2019/11/20 Python
python软件都是免费的吗
2020/06/18 Python
python集合的新增元素方法整理
2020/12/07 Python
美国最受欢迎的童装品牌之一:The Children’s Place
2016/07/23 全球购物
Sam’s Club山姆会员商店:沃尔玛旗下高端会员制商店
2017/01/16 全球购物
临床医学专业学生的自我评价分享
2013/11/21 职场文书
自荐信的基本格式
2014/02/22 职场文书
优秀党务工作者事迹材料
2014/05/07 职场文书
大学新生入学教育方案
2014/05/16 职场文书
计算机网络专业自荐书
2014/06/09 职场文书
市场调研项目授权委托书范本
2014/10/04 职场文书
公安民警正风肃纪剖析材料
2014/10/10 职场文书
2014年小学辅导员工作总结
2014/12/23 职场文书
演讲开头怎么书写?
2019/08/06 职场文书
八年级地理课件资料及考点知识分享
2019/08/30 职场文书
MongoDB balancer的使用详解
2021/04/30 MongoDB
MySQL 亿级数据导入导出及迁移笔记
2021/06/18 MySQL
详解Redis在SpringBoot工程中的综合应用
2021/10/16 Redis