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. Git『Everything up-to-date』问题解决

    今天提交代码的时候遇到了一个小问题,这里解决了记下小记. 提交代码遇到『Everything up-to-date』 上网查了下,发现中文大多答非所问,少数能解决的并没有阐述原理,所以我写这篇文章记录 ...

  2. 为什么不要使用 select * from xxx (oracle 亲测)

    打开已用时间set timing on;create table users(id number(20), name varchar2(20), password varchar2(20));inse ...

  3. ShowDoc

    ShowDoc 摘自ShowDoc 每当接手一个他人开发好的模块或者项目,看着那些没有写注释的代码,我们都无比抓狂.文档呢?!文档呢?!Show me the doc !! 程序员都很希望别人能写技术 ...

  4. Angular常用语句

    循环执行 )* ))))); //重点 : 返回deferred.promise才能链式执行then方法 return def.promise;} log : function (msg) { con ...

  5. springCloud微服务入门

    目录 前言 Eureka 注册中心server 新建 配置 服务提供者service 新建 配置 服务消费者controller 新建 配置 使用 Feign负载均衡 前言 springCloud是一 ...

  6. solr学习笔记

    目录 前言 linux部署 使用 配置 使用 前言 solr是apach基于Lucene开发的成熟的框架,这里我们学习如何部署.使用.关于集群会在后面继续添加 linux部署 mkdir /usr/l ...

  7. javascript strict mode

    ECMAScript 版本5是目前最广泛使用的js版本. 其中的一个重要feature strict mode很多人不是很清除和理解. 什么是strict mode? strict mdoe是一种强制 ...

  8. 如何在定制化组件中实现并使用v-model

    https://alligator.io/vuejs/add-v-model-support/

  9. [翻译] SCViewShaker

    SCViewShaker https://github.com/rFlex/SCViewShaker About A highly configurable UIView category for s ...

  10. [翻译] USING GIT IN XCODE [6] 在XCODE中使用GIT[6]

    USING GIT IN XCODE KEEPING IN SYNC WITH REMOTE REPOSITORIES As you make changes in your local workin ...