原生JS实现pc端轮播图效果


Posted in Javascript onDecember 21, 2020

本文实例为大家分享了JS实现pc端轮播图效果的具体代码,供大家参考,具体内容如下

案例:轮播图需求

布局:ul下有很多li标签;浮动在一行;

原理:切换图片的时候,把ul位置修改一下,给ul的父容器,设置一个 overflow:hidden;

功能需求:

  • 序号轮播
  • 左右按钮的轮播
  • 自动轮播
  • 鼠标在轮播图里面的时候,停止自动轮播,离开后继续自动轮播

实现效果:

原生JS实现pc端轮播图效果

html部分

<div class="box" id="box">
    <div class="inner" id="inner">
      <ul id="imglist">
        <li>
          <a href="#" ><img src="images/1.jpg" alt=""></a>
        </li>
        <li>
          <a href="#" ><img src="images/2.jpg" alt=""></a>
        </li>
        <li>
          <a href="#" ><img src="images/3.jpg" alt=""></a>
        </li>
        <li>
          <a href="#" ><img src="images/4.jpg" alt=""></a>
        </li>
        <li>
          <a href="#" ><img src="images/5.jpg" alt=""></a>
        </li>
        <li>
          <a href="#" ><img src="images/6.jpg" alt=""></a>
        </li>
      </ul>
      <div class="list">
        <i class="current">1</i>
        <i>2</i>
        <i>3</i>
        <i>4</i>
        <i>5</i>
        <i>6</i>
      </div>
      <div class="arrow">
        <span class="arrow-left"><</span>
        <span class="arrow-right">></span>
      </div>
    </div>
</div>

css部分

* {
      margin: 0;
      padding: 0;
    }
    
    ul {
      list-style: none;
    }
    
    .box {
      width: 730px;
      height: 454px;
      padding: 8px;
      border: 1px solid green;
      margin: 100px auto;
    }
    
    .inner {
      position: relative;
      overflow: hidden;
      height: 454px;
    }
    
    #imglist {
      width: 700%;
      position: absolute;
      left: 0;
      transition: left 300ms linear;
    }
    
    li {
      float: left;
    }
    
    .list {
      position: absolute;
      bottom: 20px;
      left: 50%;
      margin-left: -85px;
    }
    
    .list i {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: #fff;
      color: #333;
      float: left;
      font-style: normal;
      line-height: 20px;
      font-size: 14px;
      text-align: center;
      margin-right: 10px;
      cursor: pointer;
    }
    
    .list i:last-child {
      margin-right: 0;
    }
    
    .list i.current {
      background-color: skyblue;
      color: #fff;
    }
    
    .arrow {
      position: absolute;
      width: 100%;
      top: 50%;
      margin-top: -30px;
    }
    
    .arrow-left,
    .arrow-right {
      width: 30px;
      height: 60px;
      position: absolute;
      font: 20px/60px "consolas";
      color: #fff;
      background-color: rgba(0, 0, 0, .3);
      text-align: center;
      cursor: pointer;
    }
    
    .arrow-right {
      right: 0;
    }

js部分:

// 获取DOM
  var yuan = document.querySelectorAll("i");
  var li = document.querySelector("ul li");
  var ul = document.querySelector("ul");
  var imgs = document.querySelector("#imglist");
  var right = document.querySelector(".arrow-right");
  var left = document.querySelector(".arrow-left");
  var box = document.querySelector(".box");
  window.onload = function() {
    //------------------------------------这里是点击小圆圈,控制图片的切换
    //循环小圆点 注册小圆点
    for (var i = 0; i < yuan.length; i++) {
      //我们需要这里面的i 必须提前拿出来,要不最后i的值就是最后一个数值了
      yuan[i].num = i;
      //注册事件
      yuan[i].onmouseover = function() {
        // 现在要循环将样式移除
        for (var j = 0; j < yuan.length; j++) {
          yuan[j].classList.remove("current");
        }
        //这里是为了将点击的小圆点 增加上样式
        this.classList.add("current");
        var num = this.num;
        //到这里的思路就是点击小圆点 将图片进行移动,向左面移动,上面css做了相应的定位操作
        //移动的距离就是 n 乘以 一张图片的宽度,
        //n 就是选择的小圆点的 坐标-----i(num)
        //图片的宽度 box.offsetWidth
        var left = num * li.offsetWidth;
        // console.log(num, box.offsetWidth, left);
        imgs.style.left = `-${left}px`;

        //这里小原点联动左右按钮
        for (var p = 0; p < yuan.length; p++) {
          //清除全部样式(小圆点)
          yuan[p].classList.remove("current");
        }
        //给当前的小圆点增加样式
        yuan[num].classList.add("current");
        //这里这个位置比较关键,在上面设置完样式之后,记得将此num赋值给全局的index
        index = this.num;


      }
    }
    //------------------------------------以上是点击小圆圈,控制图片的切换
    //------------------------------------下面是开始右面轮播,控制图片的切换
    //首先定义一个全局的index,这个index的作用依旧是控制图片的切换
    var index = 0;
    right.onclick = function() {
      index++;
      //这里要对index做一下判断,如果不做判断,可以试想一下,
      //只要你一点击,index就会无限的增大,增大到你“无法自拔”
      if (index == ul.children.length) {
        //如果坐标为6的话,显示应该显示第1张图片,所以要复位 即index=0
        index = 0;
      }
      var left = index * li.offsetWidth;
      // console.log(index, box.offsetWidth, left);
      imgs.style.left = `-${left}px`;

      //点击右面增加联动小圆点的效果
      for (var n = 0; n < yuan.length; n++) {
        //清除全部样式(小圆点)
        yuan[n].classList.remove("current");
      }
      //给当前的小圆点增加样式
      yuan[index].classList.add("current");
    };
    //------------------------------------以上是结束右面轮播,控制图片的切换

    //------------------------------------下面是开始左面轮播,控制图片的切换
    left.onclick = function() {
      index--;
      //这里同右点击一样,需要做一下判断,
      console.log(index);
      if (index == -1) {
        index = ul.children.length - 1;
      }
      var left = index * li.offsetWidth;
      // console.log(index, box.offsetWidth, left);
      // console.log(left);
      imgs.style.left = `-${left}px`;

      //这个位置做的是 左面点击联动小圆点
      for (var m = 0; m < yuan.length; m++) {
        //清除全部样式(小圆点)
        yuan[m].classList.remove("current");
      }
      //给当前的小圆点增加样式
      yuan[index].classList.add("current");
    };
    //------------------------------------上面是结束左面轮播,控制图片的切换
    //------------------------------------开始设置自动轮播
    var timer = setInterval(function() {
      right.onclick();
    }, 1000);
    //------------------------------------以上是自动轮播结束
    //------------------------------------设置鼠标进来就停止开始
    box.onmouseover = function() {
      clearInterval(timer);
    };
    //------------------------------------设置鼠标进来就停止结束
    //------------------------------------设置鼠标出去就停止开始
    box.onmouseout = function() {
      timer = setInterval(function() {
        right.onclick();
      }, 1000);
    };
    //------------------------------------设置鼠标出去就停止结束
  }

未完待续,本篇文章做的PC端的处理,目前从6页-1页,1页到6页还有点小瑕疵,会及时更新上的,其他功能一切正常,欢迎大家评论

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

Javascript 相关文章推荐
利用JQuery为搜索栏增加tag提示
Jun 22 Javascript
浅谈JavaScript编程语言的编码规范
Oct 21 Javascript
js改变img标签的src属性在IE下没反应的解决方法
Jul 23 Javascript
jQuery插件开发的两种方法及$.fn.extend的详解
Jan 16 Javascript
jquery动画效果学习笔记(8种效果)
Nov 13 Javascript
jquery背景跟随鼠标滑动导航
Nov 20 Javascript
解决JavaScript数字精度丢失问题的方法
Dec 03 Javascript
由简入繁实现Jquery树状结构的方法(推荐)
Jun 10 Javascript
JS实现的表格行上下移动操作示例
Aug 03 Javascript
JavaScript数据操作_浅谈原始值和引用值的操作本质
Aug 23 Javascript
Angular2使用Augury来调试Angular2程序
May 21 Javascript
JavaScript实现10秒后再次获取验证码
Dec 02 Javascript
js实现移动端轮播图滑动切换
Dec 21 #Javascript
vue监听滚动事件的方法
Dec 21 #Vue.js
vue el-upload上传文件的示例代码
Dec 21 #Vue.js
微信小程序自定义支持图片的弹窗
Dec 21 #Javascript
Jquery+javascript实现支付网页数字键盘
Dec 21 #jQuery
微信小程序实现modal弹出框遮罩层组件(可带文本框)
Dec 20 #Javascript
微信小程序自定义modal弹窗组件的方法详解
Dec 20 #Javascript
You might like
探讨:php中在foreach中使用foreach ($arr as &amp;$value) 这种类型的解释
2013/06/24 PHP
PHP命名空间namespace用法实例分析
2016/09/27 PHP
Yii框架实现对数据库的CURD操作示例
2019/09/03 PHP
javascript 遍历验证所有文本框的值
2009/08/27 Javascript
js中substr,substring,indexOf,lastIndexOf的用法小结
2013/12/27 Javascript
用js编写的简单的计算器代码程序
2015/08/04 Javascript
jQuery实现的网格线绘制方法
2016/06/20 Javascript
使用bootstrapValidator插件进行动态添加表单元素并校验
2016/09/28 Javascript
用js控件div的滚动条,让它在内容更新时自动滚到底部的实现方法
2016/10/27 Javascript
详解angularJs指令的3种绑定策略
2017/04/13 Javascript
Vue 2中ref属性的使用方法及注意事项
2017/06/12 Javascript
详解angularJS动态生成的页面中ng-click无效解决办法
2017/06/19 Javascript
vue.js学习之UI组件开发教程
2017/07/03 Javascript
使用JavaScript实现链表的数据结构的代码
2017/08/02 Javascript
vue+swiper实现侧滑菜单效果
2017/12/28 Javascript
Vue中的作用域CSS和CSS模块的区别
2018/10/09 Javascript
vue+node实现图片上传及预览的示例方法
2018/11/22 Javascript
layui form表单提交后实现自动刷新
2019/10/25 Javascript
JavaScript实现电灯开关小案例
2020/03/30 Javascript
原生JS实现天气预报
2020/06/16 Javascript
[01:35]2018完美盛典章节片——共竞
2018/12/17 DOTA
[57:09]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第一场 1月26日
2021/03/11 DOTA
[01:00:14]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant BO3 第二场 2月28日
2021/03/11 DOTA
在Python中操作日期和时间之gmtime()方法的使用
2015/05/22 Python
Python环境下安装使用异步任务队列包Celery的基础教程
2016/05/07 Python
从局部变量和全局变量开始全面解析Python中变量的作用域
2016/06/16 Python
Python下的Softmax回归函数的实现方法(推荐)
2017/01/26 Python
python3实现的zip格式压缩文件夹操作示例
2019/08/17 Python
python标准库OS模块详解
2020/03/10 Python
Python爬虫工具requests-html使用解析
2020/04/29 Python
史上最详细的Python打包成exe文件教程
2021/01/17 Python
检测用户浏览器是否支持CSS3的方法
2009/08/29 HTML / CSS
金融专业毕业生推荐信
2013/11/26 职场文书
房屋出租协议书
2014/04/10 职场文书
2014年机关作风建设工作总结
2014/10/23 职场文书
雷锋电影观后感
2015/06/10 职场文书