JavaScript面向对象写个轮播图

兼容IE，通过透明度控制图片的显示。

1. 面向对象：对外统一提供调用接口的编程思想。

通过对象的原型属性和方法创建：在对象原型附加的属性或者方法将成为对象实例化的一部分，类似一个父类，新创建的对象都继承了prototype的属性和方法。这是因为当一个对象被创建时，这个构造函数将会把它的属性prototype赋给新对象的内部属性__proto__。这个__proto__被这个对象用来查找它的属性。

2. 构造一个函数，通过在其原型属性prototype上创建属性和方法

function Slide (){}

Slide.prototype = function() {
  count: 0,
  imgurl: [],
}

window.onload = function() {
  var slide = new Slide();
  slide.count = 3;
  slide.imgurl=[
    "<img src='./images/15314528688398910.jpg'/>",
    "<img src='./images/15312942915553914.jpg'/>",
    "<img src='./images/15312113912538863.jpg'/>"];
}

在html页面中创建入口：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>面向对象实现轮播图</title>
</head>
<body>
  <div id="box"></div>
  <script type="text/javascript" src="js/slide.js"></script>
</body>
</html>

变量及方法：

function runImg(){}
runImg.prototype={
	bigbox:null,//最外层容器
	boxul:null,//子容器ul
	imglist:null,//子容器img
	numlist:null,//子容器countNum
	index:0,//当前显示项
	timer:null,//控制图片转变效果
	play:null,//控制自动播放
	imgurl:[],//存放图片
	count:0,//存放的个数
	$:function(obj)   //通过id获取元素或者创建元素
	{
	},
	//初始化
	info:function(id)
	{
	},
	//封装程序入口
	action:function(id)
	{
	},
	//图片切换效果
	imgshow:function(num,numlist,imglist)
	{
	},
	//自动播放
	autoplay:function(){
	},
	//处理鼠标事件
	mouseoverout:function(box,numlist)
	{
	}
}
window.onload=function(){
	var runimg=new runImg();
	runimg.count=5;
	runimg.imgurl=[
	"<img src='imgs/1.jpg'/>",
	"<img src='imgs/2.jpg'/>",
	"<img src='imgs/3.jpg'/>",
	"<img src='imgs/4.jpg'/>",
	"<img src='imgs/5.jpg'/>"];
	runimg.info("#box");
	runimg.action("#box");
}

3. 定义$函数

判断是不是字符串，有没有带#

  $: function(obj) {
    if (typeof(obj) == "string") {
      if (obj.indexOf("#") >= 0) {
        //有#则表示取得该元素
        obj = obj.replace("#", "")
        if (document.getElementById(obj)) {
          return document.getElementById(obj)
        } else {
          alert("没有容器"+obj)
          return null
        }
      } else {
        //没有#则表示创建元素
        return document.createElement(obj);
      }
    } else {
      // 不是字符串则直接返回
      return obj
    }
  },

4. 初始化：创建图片和下标列表，并填充内容

  info: function(id) {
    // 最多5个
    this.count = this.count <= 5 ? this.count : 5;
    this.bigbox = this.$(id)
    //循环两次创建图片和下标两个列表元素
    for (var i = 0; i < 2; i++) {
      // 创建元素
      var ul = this.$("ul");
      for (var j=1; j <= this.count; j++) {
        //创建li列表并添加到ul上
        var li = this.$("li");
        li.innerHTML = i==0 ? this.imgurl[j-1] : j;
        ul.appendChild(li)
      }
      // 将创建好的两个列表都添加到html中的标签上
      this.bigbox.appendChild(ul)
    }
    //为列表添加类名
    this.boxul = this.bigbox.getElementsByTagName("ul");
    this.boxul[0].className = "imglist";
    this.boxul[1].className = "countNum";
    this.imglist = this.boxul[0].getElementsByTagName("li");
    this.numlist = this.boxul[1].getElementsByTagName("li");
    this.numlist[0].className = "current"
  },

5. 程序的入口

  // 程序入口
  action: function(id) {
    this.autoplay();
    this.mouseoverout(this.bigbox, this.numlist);
  },

6. 图片和index的切换

imgshow: function(num, numlist, imglist) {
    this.index = num;
    // 给当前下标添加样式
    for (var i = 0; i < numlist.length; i++) {
      numlist[i].className = ""
    }
    numlist[num].className = "current"
    // 先隐藏全部图片
    clearInterval(this.time);

    for (var j=0; j < imglist.length; j++) {
      imglist[j].style.opacity = 0
      imglist[j].style.filter = "alpha(opacity=0)"
    }
    // 停止循环
    // 通过setInterva增加opacity
    var that = this, alpha = 0;
    this.time = setInterval(function() {
      alpha += 2
      if (alpha > 100) {alpha = 100};
      imglist[that.index].style.opacity = alpha/100;
      imglist[that.index].style.filter = "alpha(opacity="+alpha+")";
      // 透明度为100则完成，退出循环
      if (alpha == 100) {clearInterval(that.time)};
    }, 20)
  },

7. 自动播放

  autoplay: function() {
    var that = this;
    this.play = setInterval(function(){
      that.index++;
      if (that.index > that.imglist.length-1) {that.index = 0}
      that.imgshow(that.index, that.numlist, that.imglist)
    } , 2000)
  },

8. 控制鼠标进入出去事件

  mouseoverout: function(box, numlist) {
    var that = this;
    box.onmouseover = function() {
      clearInterval(that.play)
    }
    box.onmouseout = function() {
      that.autoplay();
    }
    for (var i=0; i<numlist.length; i++) {
      numlist[i].index = i;
      numlist[i].onmouseover = function() {
        that.imgshow(this.index, that.numlist, that.imglist)
      }
    }
  }

样式：

body, ul, li, p {
	margin: 0;
	padding: 0;
}
ul{
	list-style-type:none;
}
body {
	font-family:"Times New Roman", Times, serif;
}
#box {
	position:relative;
	width:500px;
	height:240px;
	margin:10px auto;
}
#box .imglist{
	position:relative;
	width:100%;
	height:240px;
	overflow:hidden;
}
#box .imglist li{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:240px;
}
#box .countNum{
	position:absolute;
	right:0;
	bottom:5px;
}
#box .countNum li{
	width:20px;
	height:20px;
	float:left;
	color:#fff;
	border-radius:20px;
	background:#f90;
	text-align:center;
	margin-right:5px;
	cursor:pointer;
	opacity:0.7;
	filter:alpha(opacity=70);
}
#box .countNum li.current{
	background:#f60;
	font-weight:bold;
	opacity:1;
	filter:alpha(opacity=70);
}