原生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 相关文章推荐
web性能优化之javascript性能调优
Dec 28 Javascript
JavaScript 获取任一float型小数点后两位的小数
Jun 30 Javascript
JavaScript判断按钮被点击的方法
Dec 13 Javascript
JavaScript缓冲运动实现方法(2则示例)
Jan 08 Javascript
基于jQuery实现点击最后一行实现行自增效果的表格
Jan 12 Javascript
JavaScript中for循环的几种写法与效率总结
Feb 03 Javascript
前端构建工具之gulp的配置与搭建详解
Jun 12 Javascript
JS实现简单的选择题测评系统代码思路详解(demo)
Sep 03 Javascript
JS+HTML5实现获取手机验证码倒计时按钮
Aug 08 Javascript
Vue开发中遇到的跨域问题及解决方法
Feb 11 Javascript
JS绘图Flot如何实现动态可刷新曲线图
Oct 16 Javascript
微信小程序APP的生命周期及页面的生命周期
Apr 19 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
PHPMailer邮件类利用smtp.163.com发送邮件方法
2008/09/11 PHP
PHP无刷新上传文件实现代码
2011/09/19 PHP
PHP中使用匿名函数操作数据库的例子
2014/11/17 PHP
php文件上传简单实现方法
2015/01/24 PHP
Laravel框架实现发送短信验证功能代码
2016/06/06 PHP
php文件类型MIME对照表(比较全)
2016/10/07 PHP
PHP实现多关键字加亮功能
2016/10/21 PHP
PHP递归算法的简单实例
2019/02/28 PHP
javascript获取url上某个参数的方法
2013/11/08 Javascript
js中settimeout方法加参数的使用实例
2014/02/27 Javascript
sogou地图API用法实例教程
2014/09/11 Javascript
SWFObject基本用法实例分析
2015/07/20 Javascript
jquery-tips悬浮提示插件分享
2015/07/31 Javascript
node.js微信公众平台开发教程
2016/03/04 Javascript
详解nodejs中express搭建权限管理系统
2017/09/15 NodeJs
详解使用PM2管理nodejs进程
2017/10/24 NodeJs
jQuery md5加密插件jQuery.md5.js用法示例
2018/08/24 jQuery
解决vue单页路由跳转后scrollTop的问题
2018/09/03 Javascript
JS获取月的第几周和年的第几周实例代码
2018/12/05 Javascript
Vue代码整洁之去重方法整理
2019/08/06 Javascript
解决layui表格内文本超出隐藏的问题
2019/09/12 Javascript
pyqt4教程之widget使用示例分享
2014/03/07 Python
Django1.7+python 2.78+pycharm配置mysql数据库教程
2014/11/18 Python
python实现决策树C4.5算法详解(在ID3基础上改进)
2017/05/31 Python
python for循环输入一个矩阵的实例
2018/11/14 Python
opencv实现图片模糊和锐化操作
2018/11/19 Python
基于Django静态资源部署404的解决方法
2019/07/28 Python
python爬虫scrapy框架之增量式爬虫的示例代码
2021/02/26 Python
html5应用缓存_动力节点Java学院整理
2017/07/13 HTML / CSS
websocket+sockjs+stompjs详解及实例代码
2018/11/30 HTML / CSS
Under Armour安德玛荷兰官网:美国高端运动科技品牌
2019/07/10 全球购物
法国床上用品商店:La Compagnie du lit
2019/12/26 全球购物
售后客服工作职责
2014/06/16 职场文书
招标承诺书
2014/08/30 职场文书
市级三好生竞选稿
2015/11/21 职场文书
企业版Windows 11有哪些新功能? Win11适用于企业的功能介绍
2021/11/21 数码科技