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. immutable.js 在React、Redux中的实践以及常用API简介

    immutable.js 在React.Redux中的实践以及常用API简介 学习下 这个immutable Data 是什么鬼,有什么优点,好处等等 mark :  https://yq.aliyu ...

  2. oracle 导入导出 dmp 的三种方式

    1.命令行参数 比如:exp scott/tiger@orcl tables=emp file=D:\test.dmp 2.交互提示符 比如:C:\Users\Administrator>exp ...

  3. python是如何找到对应的package的?

    我们在写python代码或者阅读别人的代码时,可能会碰到对应module无法找到的问题,这时如何解决呢?我们如果对python解释器如何查找对应的module有比较深刻的理解,那么我们就可以轻松解决相 ...

  4. phantomJs 快速入门学习 了解大概

    1.hellow程序 一个永远的开头,创建一个文件hello.js.内容如下 //hello.js//在窗口输出信息 console.log('Hellow ,Word'); //退出程序,每个脚本必 ...

  5. redis几种数据类型以及使用场景

    1. string类型 string为最简单类型,一个key对应一个value set mykey "wangzai" ##设置key,第二次赋值会直接覆盖之前的 setnx my ...

  6. Sharepoint 2013 - 直接显示Doclib中的html page

    缺省的HTML不能直接显示,会被要求存盘.以下操作可以修改 Go to Central Administration Select Manage web applications Select the ...

  7. [EffectiveC++]item26:尽可能延后变量定义式的出现时间

  8. right here waiting的歌词

    right here waiting的歌词 2006-12-30 17:36 匿名 | 分类:音乐 | 该问题已经合并到>> right here waiting的歌词有吗?   扫描二维 ...

  9. Sql Server 支持的数据类型

    T-SQL语言和SQLServer数据库中的数据通常需要定义一个数据类型,数据类型定义了对象可以容纳的数据的种类. 哪些对象需要数据类型 (1).表和视图的列:                 在定义 ...

  10. 【笔记】JS脚本为什么要放在body最后面以及async和defer的异同点

    1.没有defer或async 浏览器遇到脚本的时候会暂停渲染并立即加载执行脚本(外部脚本),"立即"指的是在渲染该 script 标签之下的文档元素之前,也就是说不等待后续载入的 ...