window.onload=function(){
    (function () {
      //先设置两个简洁函数获取ID，设置透明度
      var $ = function () {
          var elements = new Array();

          for (var i = 0; i < arguments.length; i++) {
              var element = arguments[i];

              if (typeof element == 'string')
                  element = document.getElementById(element);
              if (!element) continue;
              if (arguments.length == 1) return element;

              elements.push(element);
          }

          return elements;
      };

      var setOpacity = function (node, level) {
      node = $(node);

      if(window.XMLHttpRequest){
            node.style.opacity = level / 100; //非 ie6
          }
          else{
            node.style.filter = 'alpha(opacity=' + level + ')';
          }
      };

      var getTag = function (child, parent) {
          return parent.getElementsByTagName(child);
      };

      var bindEvent = function (element, type, func) {
          if (element.addEventListener) { //for FF, chrome
              element.addEventListener(type, func, false); //false 表示冒泡
          } else if (element.attachEvent) { //for ie
              element.attachEvent('on' + type, func);
          } else {
              element['on' + type] = func;
          }
      };

      function css(obj, name, value){
            if (arguments.length==2){
                return obj.style[name];
            }
            else {
                return obj.style[name]=value;
            }
        };

      function Slider(options) {
          var id = options.id;
          var warper = this.warper = $(id); //获取包裹图片DOM(第一个UL的ID)
          var warpLis = this.warpLis = getTag("li", warper); //获取包裹下的LI子元素
          var that=this; //指代构造函数

          this.no = warpLis.length; //获取包裹LI元素的个数
          this.step = options.step || 2;
          this.autoTime = options.autoTime || 1000;   //自动播放间隔时间
          this.btnId = options.btnId || "focus_btn"; //图片上面的数字按钮的ID
          this.btnCls=options.btnCls;
          this.index = 1; //开始变幻时的下一个INDEX
          this.preIndex = 0;
          //鼠标悬停，停止播放
          this.warper.parentNode.onmouseover=function(){
              that.stopPlay(that.index);
          };
          //鼠标移出，开启播放
          this.warper.parentNode.onmouseout=function(){
              that.autoPlay();
          };
          this.init();
      };

      Slider.prototype = {
          init:function () {
              this.makeBtn(this.no, this.btnId, this.btnCls);
              this.autoPlay();
          },
          makeBtn:function (no, c, cls) { //生成按钮 no表示个数 C表示oL的ID
              var btnOl = this.btnOl = document.createElement("ol");

              btnOl.id = c;
              btnOl.className=cls;

              for (var i = 0; i < no; i++) {
                  var li = document.createElement('li');

                  if (i == 0) li.className = 'on';

                  var text = document.createTextNode(i + 1);

                  li.appendChild(text);
                  setOpacity(li, 80);

                  // 绑定鼠标事件，传递当前的INDEX和preIndex
                  bindEvent(li, 'mouseover', function (obj, t) {
                      return function () {
                          obj.mouseOn.call(obj, t);
                      };
                  }(this, i));
                  btnOl.appendChild(li);
              };

              this.warper.parentNode.appendChild(btnOl); //添加到父div下
          },
          autoPlay:function(){
              var that = this;

              // 执行播放
              clearTimeout(this.T1);
              this.T1 = setTimeout(function(){that.fadeIn(that.index)},that.autoTime);
          },
          fadeIn:function(index){
              var thisObj = this.warpLis[index];
              var thisOpacity = 0; //当前透明度从0渐入
              var that = this;

              // 底部按钮的同步,与当前的图层Z-index始终在上面
              var btnLi = getTag('li', this.btnOl);

              for (var i = 0, n = btnLi.length; i < n; i++) {
              btnLi[i].className = '';

              // 移除所有的Zindex
              this.warpLis[i].style.zIndex = '';
              };

              //在改变INDEX之前先设置透明度为0
              setOpacity(thisObj, 0);

              // 设置前一个图片的Zindex
              this.warpLis[that.preIndex].style.zIndex = 2001;

              // 设置当前图片的Zindex
              thisObj.style.zIndex = 2002;
              //alert(css(thisObj, 'opacity'));
              btnLi[index].className = 'on';

              //淡入动画
              if(that.T2)clearInterval(that.T2);

              this.T2 = setInterval(function(){
              setOpacity(thisObj,thisOpacity++); //设置透明度渐入

              if(thisOpacity == 100){
                thisOpacity = 0;
                clearInterval(that.T2);
                that.T2 = null;
                that.preIndex = that.index++;

                if(that.index == that.no)that.index = 0;

                that.autoPlay();
              }
              },10);
          },
          mouseOn:function(index){
              clearTimeout(this.T1); //鼠标移入按钮，暂停自动播放
          this.index = index;
          this.fadeIn(index);
          },
          //鼠标悬停，停止播放
          stopPlay: function(index){
              if(this.T2){
                  var thisObj = this.warpLis[index];
                  var that = this;
                  var nowOpa=css(thisObj, 'opacity')*100;

                  clearInterval(that.T2);
                  that.T2 = setInterval(function(){
              setOpacity(thisObj, nowOpa++); //设置透明度渐入

              if(nowOpa == 100){
                var thisOpacity = 0;
                clearInterval(that.T2);
                that.T2 = null;
                that.preIndex = that.index++;

                if(that.index == that.no)that.index = 0;

                clearTimeout(this.T1);
              }
              },10);
              }
              else{
                  clearTimeout(this.T1);
              }
          }
      };

      var slider1 = new Slider({
      id:'focus_pic', /**包裹图片的UL的ID**/
      btnId:"focus_btn", //幻灯片按钮的ID,可以用来控制CSS显示
      btnCls: 'play-n',
      //step:5, //透明度变化步长，默认为2
      autoTime:2000//自动播放间隔时间
      });
    })();
};

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
    margin: 0;
    padding: 0;
}
menu, ol, ul, dd { list-style: none; }
img {
  border: 0;
}
html {
    font-family: "微软雅黑", tahoma, arial, \5b8b\4f53, sans-serif;
    font-size: 12px;
}
body {
    color: #666;
    line-height: 1.5;
}
.main {
    width: 980px;
    margin: 0 auto;
}
.play {
    position: relative;
    z-index: 1000;
  margin: 0 auto 30px;
  zoom: 1;
  height: 340px;
  overflow: hidden;
}
.play-b li {
    position: absolute;
    z-index: 2000;
    left: 0;
    top: 0;
}
.play-n {
    position: absolute;
    z-index: 5000;
    right: 5px;
    bottom: 5px;
    height: 25px;
}
.play-n li {
    float: left;
  width: 25px;
  line-height: 25px;
  font-weight: bold;
  text-align: center;
  background: white;
  margin-right: 2px;
  cursor: pointer;
  border-radius: 50%;
  -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
}
.play-n li.on {
    background-color: #5C9C4E;
  color: white;
}

<div class="main">
        <div class="play">
            <ul id="focus_pic" class="play-b">
                <li style="z-index: 2002;">
                    <a href="#"><img alt="焦点图-0" src="images/qzkxy_play-0.jpg" width="980" height="340" /></a>
                </li>
                <li>
                    <a href="#"><img alt="焦点图-1" src="images/qzkxy_play-1.jpg" width="980" height="340" /></a>
                </li>
                <li>
                    <a href="#"><img alt="焦点图-2" src="images/qzkxy_play-2.jpg" width="980" height="340" /></a>
                </li>
            </ul>
        </div>
    </div>