Carousel achieve ES5

/ *
1. Completion page content
Left button span
right button span
to put the text div
OL
li
2. Set Rotation (control current subscript indexA carousel)
1. Picture: Run the display
2. dots: background
3. Text
3. Add event
1. The left button of indexA the Click -
2. ++ right buttons of indexA the Click
3 dots = index of indexA MouseEnter
4. automatically rotate
the setInterval
* /
function the Slider (ID) {
// examples properties
// rotation big box
this.bigBox ID = $ (ID);
// Get all li ul of
this.ullis this.bigBox.children = [0] .children;
// Get the number of large image
this.num = this.ullis .length;
// create and get all ol li in
this.ollis = this.createEle ();
// set the current carousel picture index
this.indexA = 0;
// Get the text message div
this.div the above mentioned id = $ ( 'msg');
// call the carousel method
this.slide ();
// Get the left button
this.ltBtn the above mentioned id = $ ( 'ltBtn');
// get right button
this.rtBtn the above mentioned id = $ ( 'rtBtn');
// add event of a call
this.addEvent ();
// timer
this.timer = null;
// call automatically rotate
this.autoPlay ();
}
// prototyping
// create a page element
Slider.prototype.createEle = function () {
// left button span
var leftSpan Create = $ ( 'span');
leftSpan.innerHTML = '<';
leftSpan.id = 'ltBtn ';
this.bigBox.appendChild (leftSpan);
// right button span
var rightSpan Create = $ (' span ');
rightSpan.innerHTML ='> ';
rightSpan.id = ‘rtBtn’;
this.bigBox.appendChild(rightSpan);
// 放文字的div
var div = $create(‘div’);
div.id = ‘msg’;
this.bigBox.appendChild(div);
// ol
var arr = [];
var ol = $create(‘ol’);
// li
for(var i = 0;i < this.num;i ++){
var li = $create(‘li’);
ol.appendChild(li);
arr.push(li);
}
this.bigBox.appendChild(ol);
return arr;
}
//设置轮播
Slider.prototype.slide = function(){
//图片
for(var i = 0;i < this.num;i ++){
this.ullis[i].style.display = ‘none’;
}
this.ullis[this.indexA].style.display = ‘block’;
//圆点
for(var i = 0;i < this.num;i ++){
this.ollis[i].style.backgroundColor = ‘red’;
}
this.ollis[this.indexA].style.backgroundColor = ‘blue’;
//文字
this.div.innerHTML = this.ullis[this.indexA].firstElementChild.firstElementChild.alt;
}
//添加事件
Slider.prototype.addEvent = function(){
var _this = this;
//左 点
this.ltBtn.onclick = function(){
_this.indexA --;
if(_this.indexA === -1){
_this.indexA = _this.num - 1;
}
//调用轮播
_this.slide();
}
//右 点
this.rtBtn.onclick = function(){
_this.indexA ++;
if(_this.indexA === _this.num){
_this.indexA = 0;
}
_This.slide ();
}
// into small dots
for (var I = 0; I <this.num; I ++) {
this.ollis [I] = I .index;
this.ollis [I]. = function OnMouseEnter () {
_this.indexA = this.index;
_this.slide ();
}
}
}
// automatically rotate
Slider.prototype.autoPlay = function () {
var = _this the this;
this.timer = the setInterval (function () {
_this.indexA ++;
IF (_this.indexA === _this.num) {
_this.indexA = 0;
}
_this.slide ();
}, 3000)
// add to the big box into the event
this.bigBox = function .onmouseenter () {
the clearInterval (_this.timer);
}
// Add to the big box removal event
this.bigBox.onmouseleave = function(){
_this.autoPlay();
}
}
//工具箱
function $id(id){
return document.getElementById(id);
}
function $create(tagName){
return document.createElement(tagName);
}