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. Spring Boot--01错误处理

    package com.smartmap.sample.ch1.controller.view; import java.io.IOException; import java.util.Collec ...

  2. CentOS7系列--10.1CentOS7中的GNOME桌面环境

    CentOS7中的桌面环境 1. 安装GNOME桌面环境 1.1. 列出所有安装套件 [root@appclient ~]# yum groups list Loaded plugins: faste ...

  3. ArcGIS10.3+Oracle12C+ArcGIS Server10.3安装布署(之三)

    1.将Oracle的客户端切换到64位 (1)将C:\下的instantclient_12_1目录重命名为instantclient_12_1X86 (2)从Oracle的官方网站下载   insta ...

  4. overload与override的区别

    override(重写,覆盖) 1.方法名.参数.返回值相同. 2.子类方法不能缩小父类方法的访问权限. 3.子类方法不能抛出比父类方法更多的异常(但子类方法可以不抛出异常). 4.存在于父类和子类之 ...

  5. Evernote Markdown Sublime使用介绍

    版权声明: 欢迎转载,但请保留文章原始出处 作者:GavinCT 出处:http://www.cnblogs.com/ct2011/p/4002619.html 这一篇博客继续探讨:Evernote ...

  6. Ubuntu16安装GPU版本TensorFlow(个人笔记本电脑)

    想着开始学习tf了怎么能不用GPU,网上查了一下发现GeForce GTX确实支持GPU运算,所以就尝试部署了一下,在这里记录一下,避免大家少走弯路. 使用个人笔记本电脑thinkpadE570,内存 ...

  7. JWT能够干什么,不应该干什么?

    http://cryto.net/~joepie91/blog/2016/06/13/stop-using-jwt-for-sessions/ At the start of this article ...

  8. 如何在 Azure 中均衡 Linux 虚拟机负载以创建高可用性应用程序

    负载均衡通过将传入请求分布到多个虚拟机来提供更高级别的可用性. 本教程介绍了 Azure 负载均衡器的不同组件,这些组件用于分发流量和提供高可用性. 你将学习如何执行以下操作: 创建 Azure 负载 ...

  9. java笔记--守护线程的应用

    守护线程的应用 Java中的线程可以分为两类,即用户线程和守护线程.用户线程是为了完成任务,而守护线程是为其他线程服务 --如果朋友您想转载本文章请注明转载地址"http://www.cnb ...

  10. Windows 7 添加快速启动栏

    1.右击任务栏空白处,选择 “工具栏” ,单击 “新建工具栏” 2.输入 以下路径: %userprofile%\AppData\Roaming\Microsoft\Internet Explorer ...