图片轮播显示效果

<div id="play" class="video_channel">
  <div class="module_video">
    <ul>
        <li style="z-index: 3; opacity:1;">
         <a href="http://bbs.xueersi.com/viewthread.php?tid=399556&extra=&page=1" target="_blank">
            <img src="http://s01.xesimg.com/web/2015/07/31/14383077138711.jpg" alt="20150731课程升级年级频道">
          </a>
        </li>
        <li style="z-index: 2; opacity: 0;">
            <a href="http://www.xueersi.com/xes.php?source=4616879&site_id=275&adsite_id=4210" target="_blank">
            <img src="http://x02.xesimg.com/web/2015/07/20/14373872228967.jpg" alt="初三汇总贴频道页">
          </a>
        </li>
        <li style="z-index: 2; opacity: 0;">
            <a href="http://www.xueersi.com/xes.php?source=4631735&site_id=275&adsite_id=4210" target="_blank">
            <img src="http://x03.xesimg.com/web/2015/07/28/14380939839017.jpg" alt="中考预备役频道页">
            </a>
        </li>
        <li style="z-index: 2; opacity: 0;">
            <a href="http://zt.xueersi.com/2015c3sq/" target="_blank">
              <img src="http://x04.xesimg.com/web/2015/07/06/14361519083367.jpg" alt="频道初三年卡8折频道优惠页">
            </a>
        </li>
        <li style="z-index: 2; opacity: 0;">
            <a href="http://www.xueersi.com/xes.php?source=4615922&site_id=275&adsite_id=4210" target="_blank">
              <img src="http://x02.xesimg.com/web/2015/07/14/14368676498852.jpg" alt="初三秋季班">
            </a>
        </li>
    </ul>
    <ol class="focus_num">
      <li class="active">1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
     </ol>
  </div>
</div>      

<script type="text/javascript">
function getStyle(obj, attr){
	return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj, false)[attr];
}

function startMove(obj, json, fn){
	clearInterval(obj.timer);
	obj.timer=setInterval(function (){
		doMove(obj, json, fn);
	}, 30);
}

function doMove(obj, json, fn){
	var attr='';
	var iCur=0;
	var iStop=0;
	for(attr in json){
		if(attr=='opacity'){
			iCur=parseInt(parseFloat(getStyle(obj, attr))*100);
		}else{
			iCur=parseInt(getStyle(obj, attr));
		}
		var iSpeed=(json[attr]-iCur)/8;
		iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
		if(iCur!=json[attr]){
			iStop++;
			if(attr=='opacity'){
				obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';
				obj.style.opacity=(iCur+iSpeed)/100;
			}else{
				obj.style[attr]=iCur+iSpeed+'px';
			}
		}
	}
	if(iStop==0) {
		clearInterval(obj.timer);
		if(fn) {
			fn();
		}
	}
}

function play() {
	var oDiv=document.getElementById('play');
	var oOl=oDiv.getElementsByTagName('ol')[0];
	var oUl=oDiv.getElementsByTagName('ul')[0];
	var aLiBtn=oOl.getElementsByTagName('li');
	var aLiAds=oUl.getElementsByTagName('li');
	var iNow=0;
	var timer=null;
	var i=0;

	for(i=0;i<aLiBtn.length;i++) {
		aLiBtn[i].index=i;
		aLiBtn[i].onmouseover=function(){
			iNow=this.index;
			tab();
		};
	}

	function tab(){
		for(i=0;i<aLiBtn.length;i++){
			aLiBtn[i].className='';
			startMove(aLiAds[i], {opacity:0});
			aLiAds[i].style.zIndex=2;//层级加在这里
		}
		aLiAds[iNow].style.zIndex++;//和这里
		aLiBtn[iNow].className='active';
		startMove(aLiAds[iNow], {opacity:100});
	}
	oDiv.onmouseover=function (){
		clearInterval(timer);
	};

	oDiv.onmouseout=function ()	{
		timer=setInterval(function (){
			iNow=(iNow+1)%aLiBtn.length;
			tab();
		}, 4000);
	};
	oDiv.onmouseout();
}

play();
</script>