function Slider(id){
    //属性
    //  1. 通过id获取元素对象(大盒子)
    this.bigBox = document.getElementById(id);
   //2. 获取出大盒子中的所有图片(数组)
   this.ullis = this.bigBox.children[0].children;
    //3. 统计图片数量(数组.length)
    this.num = this.ullis.length;
    //4. 获取所有的小圆点
    this.ollis = this.createElement();
    //5. 设置轮播的当前下标
    this.indexA = 0;
    //8. 获取文字信息的div
    this.div = $id('msg');
    this.slide();
    //6. 获取左按钮
    this.ltBtn = $id('ltBtn');
    //7. 获取右按钮
    this.rtBtn = $id('rtBtn');
    this.addEvent();
    //9. 计时器
    this.timer = null;
    this.autoPlay();
}
Slider.prototype.createElement = function(){
    //1. 左按钮
    var spanleft = document.createElement('span');
    spanleft.id = 'ltBtn';
    spanleft.innerHTML = '<';
    this.bigBox.appendChild(spanleft);
    //2. 右按钮
    var spanright = document.createElement('span');
    spanright.id = 'rtBtn';
    spanright.innerHTML = '>';
    this.bigBox.appendChild(spanright);
    //3. ol li
    var arr = []; //放置li
    //创建ol
    var ol = document.createElement('ol');
    //创建li
    for(var i = 0;i < this.num;i ++){
        var li = document.createElement('li');
        arr.push(li);
        ol.appendChild(li);
    }
    this.bigBox.appendChild(ol);
    //4. 信息框(div)
    var div = document.createElement('div');
    div.id = 'msg';
    this.bigBox.appendChild(div);
    return arr;
}
Slider.prototype.slide = function(){
    //1》图片轮播
       // 遍历所有的图片,display - none
   for(var i = 0;i < this.num;i ++){
       this.ullis[i].style.display = 'none';
   }
       // 当前图片 display-block
   this.ullis[this.indexA].style.display = 'block';
   //2》 小圆点
       //遍历所有的小圆点,background=red
   for(var i = 0;i < this.num;i ++){
       this.ollis[i].style.backgroundColor = 'red';
   }
       //当前小圆点,background = blue
   this.ollis[this.indexA].style.backgroundColor = 'blue';
       //信息框 = img中的alt属性
   this.div.innerHTML = this.ullis[this.indexA].firstElementChild.firstElementChild.alt;
}
Slider.prototype.addEvent = function(){
    var that = this;
    //  1. 左按钮 -- 点击事件-- 改变当前下标的值,调用轮播方法
    this.ltBtn.onclick = function(){
        that.indexA --;
        if(that.indexA == -1){
            that.indexA = that.num - 1;
        }
        that.slide();
    }
    //2. 右按钮 -- 点击事件--改变当前下标的值,调用轮播方法
    this.rtBtn.onclick = function(){
        that.indexA ++;
        if(that.indexA === that.num){
            that.indexA = 0;
        }
        that.slide();
    }
    //3. 遍历小圆点--移入事件--改变当前下标 的值,调用轮播方法
    for(var i = 0;i < this.num;i ++){
        //记录下标
        this.ollis[i].index = i;
        this.ollis[i].onmouseenter = function(){
            that.indexA = this.index;
            that.slide();
        }
    }
}
Slider.prototype.autoPlay = function(){
    var that = this;
    this.timer = setInterval(function(){
        that.indexA ++;
        if(that.indexA === that.num){
            that.indexA = 0;
        }
        that.slide();
    },3000)
    //移入大盒子,停止自动轮播
    this.bigBox.onmouseenter = function(){
        clearInterval(that.timer);
    }
    //移出大盒子,开启自动轮播
    this.bigBox.onmouseleave = function(){
        that.autoPlay();
    }
}
//工具箱
function $id(id){
    return document.getElementById(id);
}

求助:将以下ES5格式代码转换为ES6格式!!!的更多相关文章

  1. linux格式批量转换为dos格式

    注:写的只是基本知识,望高手勿喷,写这个不是为了炫耀,只是为了方便其他人,仅此而已. 一:脚本功能: 批量处理目录以及子目录下的文件格式问题,能够轻易的将linux格式转换为dos格式. 二:写此博客 ...

  2. java 调用OpenOffice将word格式文件转换为pdf格式

    一:环境搭建 OpenOffice 下载地址http://www.openoffice.org/ JodConverter 下载地址http://sourceforge.net/projects/jo ...

  3. 利用kindlegen实现txt格式小说转换为mobi格式小说(C++实现)

    一直以来喜欢在kindle上看小说,kindle不伤眼,也可以帮助控制玩手机的时间.但在kindle上看txt格式的网络小说就很头疼了,这类小说在kindle上是没有目录的,而且篇幅巨长.所以一直以来 ...

  4. vmware的vmdk格式虚拟机转换为qcow2格式

      今天应其他部门的需求,把一个笔记本里的vmware的window2008的虚拟机转换为qcow2格式,在公司服务器上运行. 第一次做,用了许多时间 首先: 虚拟机的镜像分为多个vmdk文件,所以我 ...

  5. python json格式字符串转换为字典格式

    不废话,看代码 #_*_ coding:utf- _*_ import os import json course=open('C:\\Users\\ly199\\Desktop\\list.txt' ...

  6. 将dos格式文件转换为unix格式

    在windows下换行符是\r\n,表示回到行首并换到下一行 而unix系统中换行符是\n 这样就存在一个问题,在windows上的文档到了unix上可能就无法使用了 针对这个情况有几种解决办法: 1 ...

  7. 使用OpenSSL(Windows x64版)将pem格式证书转换为p12格式

    今天同事遇到一个问题,他获得的证书只有pem格式,而服务器要求提交p12格式,一时搞不定,来找我帮忙. 我之前也从未接触过证书类型的转换,所以上网大致搜索了一下,又亲自动手试了试,现将有关心得经验记录 ...

  8. 如何将腾讯视频的qlv格式转换为mp4格式

    基本上每个视频app都会有自己固有的视频播放格式,比如优酷的KUX.爱奇艺的QSV和腾讯的QLV等.而今天我们重点介绍腾讯的QLV格式如何转换为MP4格式,小便也是经过多次的摸索多次的软件试用,发现的 ...

  9. windwos文档格式转换成unix格式

    在工作学习中我们避免不了需要将一些脚本和命令记录在笔记里面,我使用的是有道云笔记,每当我将上次记录在有道云的脚本复制出来进行使用的时候,总会报一些奇怪的错误,要么是包含换行符,要么就是格式不对,但是我 ...

随机推荐

  1. 微信小程序为什么不被看好?

    我自认为对新技术还是比较有热情的,可对于小程序这个“新技术”,我却完全是被动的.去年9月份的时候,微信小程序开始内测,瞬间引爆朋友圈.知乎等一众分享平台.当时我大概了解了一下,觉得从技术角度上来说没啥 ...

  2. Centos7安装最新版本的docker

    centos7 安装docker-ce ,最新版本docker,docker阿里云加速docker-ce是指docker的社区版 卸载老版本的 docker 及其相关依赖sudo yum remove ...

  3. php 打印

    php 打印功能需要printer.dll文件 扩展下载地址 http://downloads.php.net/pierre/ 这里有很多PHP的扩展

  4. Win10自动重启原因怎么查Windows10无故自动重启

    电脑偶尔自动重启,可能很少用户会在意,若电脑经常无故重启,那么应该怎么办,怎么查找电脑无故自动重启原因呢?下面就以Windows10系统自动重启为例,来查查WIN10无故重启是什么原因导致.百度经验: ...

  5. [SQL Server]SQL行转列

    SELECT * FROM (select ActionTargetType+actiontype as TypeResult, COUNT(RowGuid) as Number from BanJi ...

  6. 关于cocos2dx的textfield事件响应

    time:2015/08/27 1. textfiled cocostudio的输入框,看源代码知道他是直接继承widget的,但是真正的输入框功能是label实现的,是Textfield类的一个成员 ...

  7. 计算机中的换行符、回车符、\n、\r、\n\r 怎么区分啊?

    '\r'是回车,前者使光标到行首,(carriage return)'\n'是换行,后者使光标下移一格,(line feed) \r 是回车,return\n 是换行,newline对于换行这个动作, ...

  8. 【matlab】 幂法 求解最大特征值

    一. 算法: 1.输入矩阵A,初始向量x误差限ep,最大迭代次数N 2.置 k = 1, m1 = 0; 3.求Xr-> norm(x)   abs(Xr)=max[Xi] 1<=i< ...

  9. Ardunio控制RGB的LED灯显示彩虹渐变色.

    由于我使用的是共阴极的RGB LED,如果你的是共阳极的,接线的时候要注意一下. 其他没什么不同 //定义RGB色彩的输出I/O ; ; ; //标记颜色变化的方式,增加值还是减小值 bool red ...

  10. TeamViewer app案例分析

    产品 产品名 TeamViewer远程app 选择原因 远程连接软件是不时之需,当有时私人电脑没有在身边而又需要操作电脑时,远程控制TeamViewer这个软件能帮我们大忙. 调研与评测 1.第一次上 ...