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 相关文章推荐
基于jQuery实现左右div自适应高度完全相同的代码
Aug 09 Javascript
jquery实现加载进度条提示效果
Nov 23 Javascript
详解Javascript继承的实现
Mar 25 Javascript
深入理解ECMAScript的几个关键语句
Jun 01 Javascript
javascript 广告移动特效的实现代码
Jun 25 Javascript
js实现微博发布小功能
Jan 12 Javascript
Vue数据绑定实例写法
Aug 06 Javascript
Javascript异步执行不按顺序解决方案
Apr 30 Javascript
js校验开始时间和结束时间
May 26 Javascript
Vue如何提升首屏加载速度实例解析
Jun 25 Javascript
JavaScript实现拖动对话框效果的实现代码
Oct 12 Javascript
Vue在H5 项目中使用融云进行实时个人单聊通讯
Dec 14 Vue.js
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读取PDF内容配合Xpdf的使用
2012/11/24 PHP
php断点续传之如何分割合并文件
2014/03/22 PHP
Windows下安装PHP单元测试环境PHPUnit图文教程
2014/10/24 PHP
PHP中iconv函数转码时截断字符问题的解决方法
2015/01/21 PHP
php生成圆角图片的方法
2015/04/07 PHP
php结合md5实现的加密解密方法
2016/01/25 PHP
Thinkphp和onethink实现微信支付插件
2016/04/13 PHP
PHP去除字符串最后一个字符的三种方法实例
2017/03/01 PHP
php连接MSsql server的五种方法总结
2018/03/04 PHP
PHP中soap用法示例【SoapServer服务端与SoapClient客户端编写】
2018/12/25 PHP
运算符&amp;&amp;的三个不同层次
2013/04/07 Javascript
js+css实现增加表单可用性之提示文字
2013/06/03 Javascript
javascript判断是手机还是电脑访问网页的简单实例分享
2014/06/03 Javascript
Javascript中arguments对象详解
2014/10/22 Javascript
jquery+正则实现统一的表单验证
2015/09/20 Javascript
vue2滚动条加载更多数据实现代码
2017/01/10 Javascript
d3.js中冷门却实用的内置函数总结
2017/02/04 Javascript
js 博客内容进度插件详解
2017/02/19 Javascript
Vue兼容ie9的问题全面解决方案
2018/06/19 Javascript
基于vue-upload-component封装一个图片上传组件的示例
2018/10/16 Javascript
vue实现手机号码的校验实例代码(防抖函数的应用场景)
2019/09/05 Javascript
Vue scoped及deep使用方法解析
2020/08/01 Javascript
微信小程序将页面按钮悬浮固定在底部的实现代码
2020/10/29 Javascript
详解Python字典小结
2018/10/20 Python
pyqt5 lineEdit设置密码隐藏,删除lineEdit已输入的内容等属性方法
2019/06/24 Python
python 图像处理画一个正弦函数代码实例
2019/09/10 Python
django框架forms组件用法实例详解
2019/12/10 Python
HTML5 Canvas——用路径描画线条实例介绍
2013/06/09 HTML / CSS
意大利拉斐尔时尚购物网:Raffaello Network(支持中文)
2018/11/09 全球购物
如何查看在weblogic中已经发布的EJB
2012/06/01 面试题
车间组长岗位职责
2013/12/20 职场文书
库房主管岗位职责
2013/12/31 职场文书
简单的项目建议书模板
2014/03/12 职场文书
工伤赔偿协议书范本
2014/04/15 职场文书
小学教代会开幕词
2016/03/04 职场文书
Vue组件化(ref,props, mixin,.插件)详解
2022/05/15 Vue.js