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 相关文章推荐
js中的数组Array定义与sort方法使用示例
Aug 29 Javascript
js跳转页面方法总结
Jan 29 Javascript
jQuery操作DOM之获取表单控件的值
Jan 23 Javascript
JavaScript给url网址进行encode编码的方法
Mar 18 Javascript
解决WordPress使用CDN后博文无法评论的错误
Dec 15 Javascript
vue项目优化之通过keep-alive数据缓存的方法
Dec 11 Javascript
layui实现动态和静态分页
Apr 28 Javascript
详解Puppeteer 入门教程
May 09 Javascript
微信小程序onLaunch异步,首页onLoad先执行?
Sep 20 Javascript
vue 弹框产生的滚动穿透问题的解决
Sep 21 Javascript
vue页面切换过渡transition效果
Oct 08 Javascript
Node.js之删除文件夹(含递归删除)代码实例
Sep 09 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
MySQL的FIND_IN_SET函数使用方法分享
2012/03/27 PHP
php 地区分类排序算法
2013/07/01 PHP
PHP导航下拉菜单的实现如此简单
2013/09/22 PHP
codeigniter使用技巧批量插入数据实例方法分享
2013/12/31 PHP
thinkphp中memcache的用法实例
2014/11/29 PHP
Yii2.0使用阿里云OSS的SDK上传图片、下载、删除图片示例
2017/09/20 PHP
JavaScript 参考教程
2006/12/29 Javascript
js利用Array.splice实现Array的insert/remove
2009/01/13 Javascript
js实现鼠标悬浮给图片加边框的方法
2015/01/30 Javascript
使用jQuery实现图片遮罩半透明坠落遮挡
2015/03/16 Javascript
JavaScript中的setUTCDate()方法使用详解
2015/06/11 Javascript
js代码实现无缝滚动(文字和图片)
2015/08/20 Javascript
jQuery实现可以控制图片旋转角度效果(附demo源码下载)
2016/01/27 Javascript
JS实现拖拽的方法分析
2016/12/20 Javascript
详解vue-Resource(与后端数据交互)
2017/01/16 Javascript
jQuery 表单序列化实例代码
2017/06/11 jQuery
vue表单绑定实现多选框和下拉列表的实例
2017/08/12 Javascript
js/jQuery实现全选效果
2019/06/17 jQuery
Vue获取微博授权URL代码实例
2020/11/04 Javascript
Numpy掩码式数组详解
2018/04/17 Python
利用Python查看微信共同好友功能的实现代码
2019/04/24 Python
PyTorch加载预训练模型实例(pretrained)
2020/01/17 Python
西班牙英格列斯百货英国官网:El Corte Inglés英国
2017/10/30 全球购物
美国葡萄酒网上商店:Martha Stewart Wine Co.
2019/03/17 全球购物
美体小铺波兰官方网站:The Body Shop波兰
2019/09/03 全球购物
美国优质马术服装购买网站:Breeches.com
2019/12/16 全球购物
新西兰Bookabach:查找全球度假屋
2020/12/03 全球购物
班组长工作职责
2013/12/25 职场文书
给儿子的表扬信
2014/01/15 职场文书
市场部管理制度
2014/02/02 职场文书
服务员岗位责任制
2014/02/11 职场文书
质量负责人岗位职责
2015/02/15 职场文书
公司劳动纪律管理制度
2015/08/04 职场文书
检讨书怎么写?
2019/06/21 职场文书
2019年消防宣传标语集锦
2019/11/21 职场文书
JavaScript圣杯布局与双飞翼布局实现案例详解
2022/08/05 Javascript