首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

原生JS实现的轮播图功能详解

Posted in Javascript onAugust 06, 2018

本文实例讲述了原生JS实现的轮播图功能。分享给大家供大家参考，具体如下：

一、效果预览：

原生JS实现的轮播图功能详解

由于只能上传2M以下的图片，这里只截取了自动切换的效果：

二、编写语言

HTML、CSS、原生JS

三、编写思路

（一）HTML部分

1、.slide意为滑槽，里面存放所有图片；

2、.prev存放向左的箭头，.next存放向右的箭头；

3、pointer意为指示器，存放下方的五个切换按钮，每个切换按钮用span来表示；

4、.m-view，意为视窗，即每次看到图片的窗口，它存放以上所有的部件；

（二）CSS部分

1、.m-view设为相对定位，他的后代元素可以以它作为绝对定位的参照；

2、.slide、.prev、.next、pointer全都用绝对定位放到合适位置；

3、.slide的所有图片水平排列，且视窗.m-view的宽度设为只有一张图片那么宽，这样默认情况.slide还是会全部显示；当给.m-view设置overflow:hidden后子元素超出它的部分就会隐藏，就实现了只显示一张图片的效果；

（三）JS部分

1、切换功能：

设置一个切换函数toggle实现左切或者右切一张图，toggle有两个子函数leftToggle和rightToggle分别实现向左、向右切换一张图，将他们分别绑定到.prev和.next按钮的clik事件；

2、切换功能的淡入动画效果

只有1的话切换是立即产生的，没有过渡效果；这里利用定时器和步长将切换功能细化到更小的滑动操作leftStep和rightStep，leftToggle和rightToggle通过多次调用滑动操作来实现一次切换，这样就会产生动画效果；

3、跳转功能

对指示器的每个圆形按钮绑定跳转功能，跳转实际上是将.slide进行移动；

4、自动播放

只需要设置定时器，每隔一定时间执行切换即可；

四、我的代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>轮播图</title>
  <style>
    .m-view,.m-view .slide img{
      position: relative;/*作为绝对定位的父元素*/
      width: 800px;
      height: 600px;
    }
    .m-view{
      overflow: hidden;/*将超出该div的子元素隐藏*/
    }
    .m-view .slide{
      position: absolute;
      width: 8000px;
      height: 600px;
    }
    .m-view .slide img{
      margin-right: -5px;
    }
    .m-view .prev,.m-view .next{
      position: absolute;
      top: 40%;
      font: 60px/60px Microsoft YaHei;
      color: #00BFFF;
    }
    .m-view .prev{
      left: 10px;
    }
    .m-view .next{
      right: 10px;
    }
    .m-view .pointer{
      position: absolute;
      bottom: 40px;
      left: 33%;
    }
    .m-view .pointer span{
      display: inline-block;/*水平排列*/
      width: 40px;
      height: 40px;
      border-radius: 20px;
      margin-right: 10px;
      background-color: #00FF00;
    }
    .m-view .pointer .on{/*点亮当前图片对应的圆圈*/
      background-color: #1E90FF;
    }
  </style>
</head>
<body>
  <div class="m-view">
    <div class="slide" style="left: -800px">
      <img src="../lunbo/5.jpg" alt="4">
      <img src="../lunbo/1.jpg" alt="0">
      <img src="../lunbo/2.jpg" alt="1">
      <img src="../lunbo/3.jpg" alt="2">
      <img src="../lunbo/4.jpg" alt="3">
      <img src="../lunbo/5.jpg" alt="4">
      <img src="../lunbo/1.jpg" alt="0">
    </div>
    <div class="prev"><</div>
    <div class="next">></div>
    <div class="pointer">
      <span class="button on" index="0"></span>
      <span class="button" index="1"></span>
      <span class="button" index="2"></span>
      <span class="button" index="3"></span>
      <span class="button" index="4"></span>
    </div>
  </div>
  <script type="text/javascript">
    var view=document.getElementsByClassName('m-view')[0];
    var slide=document.getElementsByClassName('slide')[0];
    var prev=document.getElementsByClassName('prev')[0];
    var next=document.getElementsByClassName('next')[0];
    var button=document.getElementsByClassName('button');
    var curIndex=0;//当前图片的索引位置
    var toggled=true;//是否正在切换，true表明切换已完成，此时才能切换
    /* Toggle函数实现切换一张图片的功能 */
    function Toggle () {
      var TIMER=50;//滑动一次所用的时间，它是setInterval的第二个参数
      var time=800;//每切换一张图片总共用的时长
      var times=time/TIMER;//每切换一张图片需滑动的次数
      var stepLenth=800/times;//每次滑动的步长
      var leftToggle=function () {
        var t1=times;
        function leftStep(){
          slide.style.left=parseInt(slide.style.left)+stepLenth+"px";
          t1--;
          if (!t1) {
            clearInterval(interval);
            curIndex--;
            if (curIndex<0) {
              slide.style.left=parseInt(slide.style.left)-4000+"px";
              curIndex=4;
            };
            toggled=true;
          };
        };
        if (toggled==true) {
          toggled=false;
          button[curIndex].className="button";
          if (curIndex!=0) {
            button[curIndex-1].className="button on";
          }else{
            button[curIndex+4].className="button on";
          }
          var interval=setInterval(leftStep,TIMER);
        };
      };
      var rightToggle=function () {
        var t2=times;
        function leftStep(){
          slide.style.left=parseInt(slide.style.left)-stepLenth+"px";
          t2--;
          if (!t2) {
            clearInterval(interval);
            curIndex++;
            if (curIndex>4) {
              slide.style.left=parseInt(slide.style.left)+4000+"px";
              curIndex=0;
            };
            toggled=true;
          };
        };
        if (toggled==true) {
          toggled=false;
          button[curIndex].className="button";
          if (curIndex!=4) {
            button[curIndex+1].className="button on";
          }else{
            button[curIndex-4].className="button on";
          };
          var interval=setInterval(leftStep,TIMER);
        };
      }
      this.leftToggle=leftToggle;//输出对外的接口
      this.rightToggle=rightToggle;
    };
    var toggle=new Toggle();
    prev.onclick=function () {
      toggle.leftToggle();
    };
    next.onclick=function () {
      toggle.rightToggle();
    };
    /* 点击圆圈跳转功能 */
    for (var i = 0; i < button.length; i++) {
      button[i].onclick=function () {
        var newIndex=parseInt(this.getAttribute("index"));
        if (newIndex!=curIndex) {
          var distance=-800*(newIndex-curIndex);
          slide.style.left=parseInt(slide.style.left)+distance+"px";
          button[curIndex].className="button";
          button[newIndex].className="button on";
          curIndex=newIndex;
        };
      };
    }
    /* 自动播放功能，鼠标移上去停止播放，移开再次播放 */
    var intervalo=setInterval(toggle.rightToggle,3000);
    view.onmouseover=function () {
      clearInterval(intervalo);
    }
    view.onmouseout=function () {
      intervalo=setInterval(toggle.rightToggle,3000);
    }
  </script>
</body>
</html>

五、一些总结

1、本次采用了面向对象和封装的思路，这是因为个人体会到确实面向对象的设计能使代码编写思路更加清晰，还能够免去很多冗余重复的代码，也尝试过其他书写思路，但都会使代码变得不太直观；要注意的一点就是封装后要向外提供接口，且如果是封装在一个函数中，需要实例化一个对象才能调用；

2、在.slide中设置了一个内联样式，这是因为在后面要获取并改变它的left属性，如果不采用内联样式的方法，将无法设置；因为初始时.style.left只能获取内联样式，即使采用内部样式和外部样式也会使得获取的值为undefined。当然，肯定也可以采用其他方法，但是似乎其他方案都更为复杂一些，没找到更简便的方法。

3、在前后各多放置一张图片的作用：
比如，当前是图片1，现在向左切换，可以和其他位置一样先执行统一的左移操作，这时视窗显示额外放置的图片5，再将.slide整体左移使真正的图片5显示在视窗中，这样是先出现了动画效果再“暗中移动”了.slide，就好像没移动一样，真正做到了无缝切换，逻辑也很简单；如果不放置额外的图片，就需要先将视窗左移，使图片5显示在视窗中，这样动画效果难以设置。

4、在获取每个span在它父元素的索引位置时，采用了getAttribute获取自定义的index属性的方法，其他方法肯定也有不少，但是肯定不能在循环中把i的值直接当成span的索引位置。

5、在跳转功能中，如果要跳转的正是当前的页面，应该什么也不做，这样可以优化性能 。

6、在点击左右箭头切换时，先判断上一次动画是否完成，没完成就不切换，这样可以优化性能，否则连续点击可能导致卡顿、切换效果不佳。

7、代码似乎还有可以优化的地方；

8、这个只是制作了一个轮播图，接下来考虑做一个轮播组件，似乎难度要大些，还有3D的轮播效果也想要尝试下了。

PS：感兴趣的朋友还可以将上述代码中的图片替换成网络图片，再使用如下在线工具在线测试运行效果：

HTML/CSS/JavaScript代码运行工具
http://tools.3water.com/code/HtmlJsRun

在线HTML/CSS/JavaScript前端代码调试运行工具
http://tools.3water.com/code/WebCodeRun

希望本文所述对大家JavaScript程序设计有所帮助。

原生JS实现的轮播图功能详解

- Author -

夜色芜染

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jQuery中extend函数详解
Jul 13 Javascript
javascript常用经典算法实例详解
Nov 25 Javascript
一种基于浏览器的自动小票机打印实现方案(js版)
Jul 26 Javascript
JS实现物体带缓冲的间歇运动效果示例
Dec 22 Javascript
基于jQuery实现选项卡效果
Jan 04 Javascript
基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动
Feb 08 Javascript
神级程序员JavaScript300行代码搞定汉字转拼音
May 20 Javascript
JavaScript时间戳与时间日期间相互转换
Dec 11 Javascript
实例讲解JS中pop使用方法
Jan 27 Javascript
详解vue项目中使用token的身份验证的简单实践
Mar 08 Javascript
详解Node.js一行命令上传本地文件到服务器
Apr 22 Javascript
javascript中innerHTML 获取或替换html内容的实现代码
Mar 17 Javascript
在 Angular6 中使用 HTTP 请求服务端数据的步骤详解
Aug 06 #Javascript
animate.css在vue项目中的使用教程
Aug 05 #Javascript
iconfont的三种使用方式详解
Aug 05 #Javascript
vue-content-loader内容加载器的使用方法
Aug 05 #Javascript
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
Aug 05 #Javascript
dts文件中删除一个node或属性的操作方法
Aug 05 #Javascript
深入理解JavaScript的async/await
Aug 05 #Javascript
V Rising(1) commit(1) pytz(1) 内置函数(1) 自定义函数(1) GoFrame(3) procedure(1) harbor(1) Navicat(1) Tablespace(1)
You might like
php Xdebug 调试扩展的安装与使用.
2010/03/13 PHP
php执行多个存储过程的方法【基于thinkPHP】
2016/11/08 PHP
PHP 的Opcache加速的使用方法
2017/12/29 PHP
Laravel timestamps 设置为unix时间戳的方法
2019/10/11 PHP
script标签属性type与language使用选择
2012/12/02 Javascript
在Iframe中获取父窗口中表单的值(示例代码)
2013/11/22 Javascript
JS实现局部选择打印和局部不选择打印
2014/04/03 Javascript
js实现键盘操作实现div的移动或改变的原理及代码
2014/06/23 Javascript
js通过location.search来获取页面传来的参数
2014/09/11 Javascript
jQuery中has()方法用法实例
2015/01/06 Javascript
百度坐标（BD09）、国测局坐标（火星坐标，GCJ02）、和WGS84坐标系之间的转换
2016/02/19 Javascript
基于JS实现数字+字母+中文的混合排序方法
2016/06/06 Javascript
再次谈论Javascript中的this
2016/06/23 Javascript
Ubuntu系统下Angularjs开发环境安装
2016/09/01 Javascript
JavaScript给每一个li节点绑定点击事件的实现方法
2016/12/01 Javascript
浅谈javascript中的 “ &amp;&amp; ” 和 “ || ”
2017/02/02 Javascript
JS实现仿UC浏览器前进后退效果的实例代码
2017/07/17 Javascript
基于jQuery实现的单行公告活动轮播效果
2017/08/23 jQuery
layer实现关闭弹出层刷新父界面功能详解
2017/11/15 Javascript
JS计算输出100元钱买100只鸡问题的解决方法
2018/01/04 Javascript
JavaScript设计模式之构造器模式(生成器模式)定义与用法实例分析
2018/07/26 Javascript
vue1.0和vue2.0的watch监听事件写法详解
2018/09/11 Javascript
浅谈vue在html中出现{{}}的原因及解决方式
2020/11/16 Javascript
Vue 的 v-model用法实例
2020/11/23 Vue.js
Python 自动安装 Rising 杀毒软件
2009/04/24 Python
使用Python的Supervisor进行进程监控以及自动启动
2014/05/29 Python
介绍Python中的一些高级编程技巧
2015/04/02 Python
Python 字符串与数字输出方法
2018/07/16 Python
python 顺时针打印矩阵的超简洁代码
2018/11/14 Python
解决python多行注释引发缩进错误的问题
2019/08/23 Python
10个Python面试常问的问题(小结)
2019/11/20 Python
浅谈Python中os模块及shutil模块的常规操作
2020/04/03 Python
JD Sports西班牙：英国领先的运动服装公司
2020/01/06 全球购物
adidas马来西亚官网：adidas MY
2020/09/12 全球购物
中国好声音广告词
2014/03/18 职场文书
《吃水不忘挖井人》教学反思
2016/02/22 职场文书