/* 左右按钮 、文字信息的div 、 小圆点（ol li) 设置轮播 大图： display 圆点： background 改变当前下标（事件） 自动轮播 */ function Slider(id){ //获取大盒子 this.bigBox = $(’#’ + id); //所有的大图li this.ulli =this.bigBox.children[0].children; //大图数量 this.num = this.ulli.length; //创建元素并返回li this.olli = this.createEle(); //当前下标 this.indexA = 0; this.div = $(’#msg’); this.slide(); //左右按钮 this.ltBtn = $(’#ltBtn’); this.rtBtn = $(’#rtBtn’); //添加事件 this.addEvent();
} Slider.prototype.addEvent = function(){ this.ltBtn.onclick = function(){ this.indexA – ; if(this.indexA === -1){ this.indexA = this.num - 1; } this.slide(); }.bind(this); this.rtBtn.onclick = ()=>{ this.indexA ++; if(this.indexA == this.num){ this.indexA = 0; } this.slide(); } var that = this; for(var i = 0;i < this.num;i ++){ this.olli[i].index = i; this.olli[i].onmouseenter = function(){ that.indexA = this.index; that.slide(); }
}} Slider.prototype.slide = function(){ //所有的大图 none 所有的圆点red for(var i = 0;i < this.num;i ++){ this.ulli[i].style.display = ‘none’; this.olli[i].style.background = ‘red’; } //显示当前大图 this.ulli[this.indexA].style.display = ‘block’; //当前圆点 蓝色 this.olli[this.indexA].style.background = ‘blue’; //显示文字 this.div.innerHTML = this.ulli[this.indexA].children[0].children[0].alt; } Slider.prototype.createEle = function(){ //左右按钮 var leftSpan = $create(‘span’); leftSpan.id = ‘ltBtn’; leftSpan.innerHTML = ‘<’; this.bigBox.appendChild(leftSpan);
var rightSpan = $create('span'); rightSpan.id = 'rtBtn'; rightSpan.innerHTML = '>'; this.bigBox.appendChild(rightSpan); //文字信息的div var div = $create('div'); div.id = 'msg'; this.bigBox.appendChild(div); //ol li 返回所有的li var arr = []; var ol = $create('ol'); for(var i = 0;i < this.num;i ++){ var li = $create('li'); arr.push(li); ol.appendChild(li); } this.bigBox.appendChild(ol); return arr;}
function $(select){ return document.querySelector(select); } function $create(tagName){ return document.createElement(tagName); }
