原生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 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(1)
Dec 23 Javascript
基于jquery的模态div层弹出效果
Aug 21 Javascript
JS实现时间格式化的方式汇总
Oct 16 Javascript
jquery ajax的success回调函数中实现按钮置灰倒计时
Nov 19 Javascript
用javascript添加控件自定义属性解析
Nov 25 Javascript
jquery操作select方法汇总
Feb 05 Javascript
基于jquery实现智能提示控件intellSeach.js
Mar 17 Javascript
打造自己的jQuery插件入门教程
Sep 23 Javascript
JavaScript交换两个变量值的七种解决方案
Dec 01 Javascript
利用yarn代替npm管理前端项目模块依赖的方法详解
Sep 04 Javascript
js原生日历的实例(推荐)
Oct 31 Javascript
深入浅析javascript函数中with
Oct 28 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实现读取超大文件的方法
2014/07/28 PHP
php使用GD实现颜色渐变实例
2015/06/02 PHP
Yii开启片段缓存的方法
2016/03/28 PHP
PHP实现字母数字混合验证码功能
2019/07/11 PHP
jquery表格内容筛选实现思路及代码
2013/04/16 Javascript
js自动查找select下拉的菜单并选择(示例代码)
2014/02/26 Javascript
jQuery不使用插件及swf实现无刷新文件上传
2014/12/08 Javascript
JS基于递归实现倒计时效果的方法
2016/11/26 Javascript
BootStrap 图标icon符号图标glyphicons不正常显示的快速解决办法
2016/12/08 Javascript
jQuery实现拖动剪裁图片作为头像
2016/12/28 Javascript
详解vue2父组件传递props异步数据到子组件的问题
2017/06/29 Javascript
深入解析Vue 组件命名那些事
2017/07/18 Javascript
jquery select插件异步实时搜索实例代码
2017/10/20 jQuery
使用vue2实现购物车和地址选配功能
2018/03/29 Javascript
JavaScript中this用法学习笔记
2019/03/17 Javascript
微信小程序开发实现的IP地址查询功能示例
2019/03/28 Javascript
详解easyui 切换主题皮肤
2019/04/04 Javascript
使用imba.io框架得到比 vue 快50倍的性能基准
2019/06/17 Javascript
vue源码nextTick使用及原理解析
2019/08/13 Javascript
node 版本切换的实现
2020/02/02 Javascript
jquery实现广告上下滚动效果
2021/03/04 jQuery
30分钟搭建Python的Flask框架并在上面编写第一个应用
2015/03/30 Python
Python捕捉和模拟鼠标事件的方法
2015/06/03 Python
图文详解WinPE下安装Python
2016/05/17 Python
Python操作word常见方法示例【win32com与docx模块】
2018/07/17 Python
使用PyQt4 设置TextEdit背景的方法
2019/06/14 Python
简单了解Python生成器是什么
2019/07/02 Python
windows上安装python3教程以及环境变量配置详解
2019/07/18 Python
使用python批量转换文件编码为UTF-8的实现
2020/04/03 Python
美国休闲服装品牌:J.Crew Factory
2017/03/04 全球购物
七年级数学教学反思
2014/01/22 职场文书
培训班开班仪式主持词
2014/03/28 职场文书
竞选大队干部演讲稿
2014/09/11 职场文书
劳模事迹材料范文
2014/12/24 职场文书
自考生自我评价
2019/06/21 职场文书
浅谈mysql返回Boolean类型的几种情况
2021/06/04 MySQL