JavaScript面向对象的方式开发轮播图插件
轮播图是很多页面必不可少的组件。这里来使用面向对象方式开发一个插件。减去开发的痛楚
首先需要寻找对象：只有一个对象，轮播图！关键点在于找到这个对象所拥有的属性以及方法，通过代码实现出来，这是面向对象最核心的本质；
其属性有：
图片集合；按钮；角标；文本区；当前面的编号；切换速度；
方法有：
上一张（）下一张（）暂停播放（） 自动播放（）继续播放（）调到指定的图片（）；这些方法是重中之重；
轮播图的基本结构如下
<div class="slider" data-speed="3000" data-currentIndex="1" data-isTxt="true" data-isAuto="true"> <ul class="slider-content"> <li><a href=""><img src="./img/less.jpg" alt="让css可以编程"></a></li> <li><a href=""><img src="./img/nodejs.jpg" alt="nodejs.jpg"></a></li> <li><a href=""><img src="./img/react.jpg" alt="react.jpg"></a></li> <li><a href=""><img src="./img/vue.jpg" alt="vuejs.jpg"></a></li> </ul> </div>
轮播图的css如下
ul,li,ol,p{list-style: none;margin:0;padding:0;} .slider{position:relative;width: 800px;height: 400px;margin:50px auto;} .slider-content li{position: absolute;left:0;top:0;transition: opacity .5s;} img{width: 800px;height: 400px;} .btn{position: absolute;width:50px;height: 50px;border-radius: 25px;top:50%; transform: translateY(-50%); /*margin-top:-25px; */ background-color: #fff;color:black; } .btn-left{left:30px;} .btn-right{right:30px;} ol{text-align:center;position: absolute;height: 20px;background-color: rgba(255,255,255,.5);bottom:15px;} ol li{display: inline-block;margin:3px 5px 0;width: 14px;height: 14px;border-radius: 7px;background-color: #000;font-size: 12px;transition: transform .5s} .txt{position: absolute;bottom:0px;text-indent:20px;line-height:40px;height: 40px;width: 100%;background-color:rgba(0,0,0,.5); color: #fff;font-size: 20px; } .current{background-color: red;transform: scale(2);}/*当前的角标*/
接下来就是对轮播图的js部分方法和属性的封装
;(function(){
function extend(defaultSetting,userSetting){
//创建一个空对象
var obj={};
for(var p in defaultSetting){
if(userSetting.hasOwnProperty(p)){ //(1)
obj[p] = userSetting[p];
}
else{ //(2)
obj[p] = defaultSetting[p];
}
}
return obj;
}
function Slider(contentId,userSetting={}) {
var defaultSetting = {
speed:2000,
currentIndex:0,
isAuto:true,
isTxt:true,
directorPos:"center"
}
this.setting = extend(defaultSetting,userSetting);//综合考虑用户的设置和默认值后得到的。
this.timer = null; //定时器
// 获取整体轮播图的容器
this.container = document.getElementById(contentId);
if(this.container == null){
console.info("没有这个id，你看清楚再来");
return {};
}
// 获取图片集合
this.lis = this.container.querySelector(".slider-content").querySelectorAll("li");
this.len = this.lis.length;//图片的张数
this.directors = []; //角标；
this.currentIndex = this.setting.currentIndex; //当前显示的那张图的编号
this.speed = this.setting.speed; // 每隔2s,切换一张图 2000ms 单位是ms
//this.dom();
dom.call(this); //动态创建dom元素
//this.init();
init.call(this); //this.初始化，绑定一些事件
this.goto(this.currentIndex); //显示当前图片
// if(this.setting.isAuto)
// {
// this.auto();
// }
this.setting.isAuto && this.auto(); //开始自动播放
}
function dom(){
var that = this;
//创建按钮，设置属性，添加事件响应，添加到外部的容器中
this.btnRight = document.createElement("span");
this.btnRight.className = "btn btn-right";
this.btnRight.innerHTML = "后";
this.btnRight.onclick =function(){
that.next();
}
this.btnLeft = document.createElement("span");
this.btnLeft.className = "btn btn-left";
this.btnLeft.innerHTML = "前";
this.btnLeft.onclick =function(){
that.prev();
}
this.container.appendChild(this.btnRight);
this.container.appendChild(this.btnLeft);
//创建文字区域，设置属性，添加到外部的容器中
if( this.setting.isTxt){
this.txtArea = document.createElement("p");
this.txtArea.className = "txt";
this.txtArea.innerHTML = "";
this.container.appendChild(this.txtArea);
}
//先创建角标的容器 ol
var ol = document.createElement("ol");
ol.className = "slider-director";
if(this.setting.directorPos == "center"){
ol.style.left = "50%";
ol.style.right="auto";
ol.style.transform = "translateX(-50%) ";
}
else if(this.setting.directorPos == "right"){
ol.style.left = "auto";
ol.style.right="20px";
}
else{
ol.style.left = "50%";
ol.style.right="auto";
ol.style.transform = "translateX(-50%) ";
}
for(var i=0;i<this.len;i++){
//用循环去创建多个li
var li = document.createElement("li");
li.innerHTML = i+1;
this.directors.push(li);
//添加到ol中
ol.appendChild(li);
}
//ol添加到轮播图的容器中
this.container.appendChild(ol);
}
function init(){
console.info("init",this)
var that = this;
for (var i = 0; i < this.directors.length; i++) {
this.directors[i].onmouseover = function(abc){
return function(){
that.goto(abc);
}
}(i)
// this.directors[i].abc = i;
// this.directors[i].onmouseover = function(){
// that.goto(this.abc);
// }
}
this.container.onmouseenter = function(){
that.pause();
}
this.container.onmouseleave = function(){
that.continue();
}
}
// 上一张（）
Slider.prototype.prev = function(){
//更新currentIndex
this.currentIndex -= 1;
if(this.currentIndex < 0)
this.currentIndex = this.len - 1;
this.goto(this.currentIndex)
}
//下一张（）
Slider.prototype.next = function(){
//更新currentIndex
this.currentIndex += 1;
if(this.currentIndex >= this.len)
this.currentIndex = 0;
this.goto(this.currentIndex);
}
//跳到指定张 n：[0,this.len-1]
Slider.prototype.goto = function (n) {
this.currentIndex = n ; //更新currentIndex
//console.info(this.currentIndex);
// 把所有的图片改成display：none
for(var i = 0;i<this.len;i++){
this.lis[i].style.opacity = 0;
//this.lis[i].style.display="none";
}
// 把当前currentIndex改成display:block;
// this.lis[n].style.display = "block";
this.lis[n].style.opacity = 1;
for(var i =0; i<this.len;i++){
this.directors[i].className = ""; //清除所有的className
}
this.directors[n].className="current";
//更新p标签中的内容
this.txtArea && ( this.txtArea.innerHTML = this.lis[n].querySelector("img").getAttribute("alt") );//当前图片中的alt属性
}
//自动播放（）
Slider.prototype.auto = function () {
var that = this;
clearInterval(this.timer);
this.timer = setInterval(function(){
that.next();
},this.speed);
}
//暂停播放（）
Slider.prototype.pause = function(){
clearInterval(this.timer)
}
//继续方法（）
Slider.prototype.continue = function(){
this.auto();
}
window.Slider = Slider;
})();
用户自定义配置的js
function extend(defaultSetting,userSetting){
//创建一个空对象
var obj={};
for(var p in defaultSetting){
if(userSetting.hasOwnProperty(p)){ //(1)
obj[p] = userSetting[p];
}
else{ //(2)
obj[p] = defaultSetting[p];
}
}
return obj;
}
