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使用一个按钮控制图片的伸缩实现思路
Apr 19 Javascript
Jquery Uploadify多文件上传带进度条且传递自己的参数
Aug 28 Javascript
javascript设置金额样式转换保留两位小数示例代码
Dec 04 Javascript
node.js中的console.dir方法使用说明
Dec 10 Javascript
javascript模拟评分控件实现方法
May 13 Javascript
jQuery 如何给Carousel插件添加新的功能
Apr 18 Javascript
浅谈javascript基础之客户端事件驱动
Jun 10 Javascript
老生常谈jacascript DOM节点获取
Apr 17 Javascript
Angular表格神器ui-grid应用详解
Sep 29 Javascript
微信小程序实现录音时的麦克风动画效果实例
May 18 Javascript
基于原生js实现判断元素是否有指定class名
Jul 11 Javascript
解决removeEventListener 无法清除监听的问题
Oct 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实现阳历到农历转换的类实例
2015/03/07 PHP
Zend Framework入门之环境配置及第一个Hello World示例(附demo源码下载)
2016/03/21 PHP
php opendir()列出目录下所有文件的实例代码
2016/10/02 PHP
Laravel 集成 Geetest验证码的方法
2018/05/14 PHP
CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
2015/05/12 Javascript
jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
2016/02/25 Javascript
jQuery学习笔记之入门
2016/12/14 Javascript
JavaScript实现256色转灰度图
2017/02/22 Javascript
JavaScript数据结构之链表的实现
2017/03/19 Javascript
完美解决手机浏览器顶部下拉出现网页源或刷新的问题
2017/11/30 Javascript
Vue自定义属性实例分析
2019/02/23 Javascript
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
2019/05/01 Javascript
ES6基础之数组和对象的拓展实例详解
2019/08/22 Javascript
js实现双人五子棋小游戏
2020/05/28 Javascript
JS实现页面鼠标点击出现图片特效
2020/08/19 Javascript
记录Django开发心得
2014/07/16 Python
python字符串连接的N种方式总结
2014/09/17 Python
Python多线程编程(八):使用Event实现线程间通信
2015/04/05 Python
浅谈Python中copy()方法的使用
2015/05/21 Python
python中利用Future对象回调别的函数示例代码
2017/09/07 Python
基于Python的PIL库学习详解
2019/05/10 Python
Python初学者常见错误详解
2019/07/02 Python
Keras 在fit_generator训练方式中加入图像random_crop操作
2020/07/03 Python
linux mint中搜狗输入法导致pycharm卡死的问题
2020/10/28 Python
Pandas中两个dataframe的交集和差集的示例代码
2020/12/13 Python
欧舒丹英国官网:购买欧舒丹护手霜等明星产品
2017/01/17 全球购物
如何配置、使用和清除Smarty缓存
2015/12/23 面试题
毕业生找工作的求职信范文
2013/12/24 职场文书
大学生学期自我鉴定
2014/03/19 职场文书
励志演讲稿3分钟
2014/08/21 职场文书
学生检讨书如何写
2014/10/30 职场文书
2014年学校体育工作总结
2014/12/08 职场文书
催款律师函范文
2015/05/27 职场文书
欢送会主持词
2015/07/01 职场文书
2015新教师教学工作总结
2015/07/22 职场文书
合作协议书格式范本
2016/03/21 职场文书