广告效果

延时切换特效

function $(id){
	return typeof id==='string'?document.getElementById(id):id;
}

window.onload=function(){
  // 标签的索引
  var index=0;
  var timer=null;
  // 标题中的每一个子标题
  var lis=$('notice-tit').getElementsByTagName('li'),
  // 每一个子标题对应的div
      divs=$('notice-con').getElementsByTagName('div');
  // 不能对应的话返回错误
  if(lis.length!=divs.length) return;

  // 遍历所有的页签
  for(var i=0;i<lis.length;i++){
    lis[i].id=i;
    lis[i].onmouseover=function(){
      // 用that这个变量来引用当前滑过的li
      var that=this;
      // 如果存在准备执行的定时器，立刻清除，只有当前停留时间大于500ms时才开始执行
      if(timer){
        clearTimeout(timer);
        timer=null;
      }
      // 延迟半秒执行
      timer=window.setTimeout(function(){
        for(var j=0;j<lis.length;j++){
          lis[j].className='';
          divs[j].style.display='none';
        }
        lis[that.id].className='select';
        divs[that.id].style.display='block';
      },500);
    }
  }
}

<div id="notice" class="notice">
		<div id="notice-tit" class="notice-tit">
		  <ul>
		  	<li>
		  		<!-- 顶层标签 -->
		  		<a href="#">公告</a>
		  	</li>
		  	<li>
		  		<a href="#">规则</a>
		  	</li>
		  	<li>
		  		<a href="#">论坛</a>
		  	</li>
		  	<li>
		  		<a href="#">安全</a>
		  	</li>
		  	<!-- 默认加载的时候选中项 -->
		  	<li class="select">
		  		<a href="#">公益</a>
		  	</li>
		  </ul>
		</div>
		<div id="notice-con" class="notice-con">
			<div class="mod" style="display:none">
				<ul>
					<li>
						<a href="#">
                          张勇：要玩快乐足球
						</a>
					</li>
                    <li>
						<a href="#">
                          阿里2000万驰援灾区！
						</a>
					</li>
					<li>
						<a href="#">
                          旅游宝让你边玩边赚钱
						</a>
					</li>
					<li>
						<a href="#">
                          多行跟进阿里信用贷款
						</a>
					</li>
				</ul>
			</div>

<div class="mod" style="display:none">
				<ul>
					<li>
						<span>
							[
                              <a href="#">通知</a>
							]
						</span>
						<a href="#">
                          "滥发"即将换新
						</a>
					</li>
                    <li>
						<span>
							[
                              <a href="#">通知</a>
							]
						</span>
						<a href="#">
                          比特币严管啦！
						</a>
					</li>
					<li>
						<span>
							[
                              <a href="#">通知</a>
							]
						</span>
						<a href="#">
                          禁发商品名录！
						</a>
					</li>
	                <li>
						<span>
							[
                              <a href="#">通知</a>
							]
						</span>
						<a href="#">
                          商品属性限制
						</a>
					</li>
				</ul>
			</div>
			<div class="mod" style="display:none">
				<ul>
					<li>
						<span>
							[
                              <a href="#">聚焦</a>
							]
						</span>
						<a href="#">
                          金牌卖家再启航
						</a>
					</li>
                    <li>
						<span>
							[
                              <a href="#">功能</a>
							]
						</span>
						<a href="#">
                          橱窗规则升级啦
						</a>
					</li>
					<li>
						<span>
							[
                              <a href="#">话题</a>
							]
						</span>
						<a href="#">
                          又爱又恨优惠劵 
						</a>
					</li>
	                <li>
						<span>
							[
                              <a href="#">工具</a>
							]
						</span>
						<a href="#">
                          购后送店铺红
						</a>
					</li>
				</ul>
			</div>
            <div class="mod" style="display:block">
				<ul>
					<li>
						<a href="#">
                          个人重要信息要管牢！
						</a>
					</li>
                    <li>
						<a href="#">
                           卖家防范红包欺诈提醒
						</a>
					</li>
					<li>
						<a href="#">
                            更换收货地址的陷阱！
						</a>
					</li>
	                <li>
                        <a href="#">
                           注意骗子的技术升级了！
						</a>
					</li>
				</ul>
			</div>
            <div class="mod" style="display:none">
				<ul>
					<li>
						<a href="#">
                          走进无声课堂
						</a>
					</li>
                    <li>
						<a href="#">
                           淘宝之行大众评审赢公益金
						</a>
					</li>
					<li>
						<a href="#">
                            爱心品牌联合征集
						</a>
					</li>
	                <li>
                        <a href="#">
                           名公益机构淘宝开店攻略
						</a>
					</li>
				</ul>
			</div>
		</div>
	</div>

设置自动切换特效：

function $(id){
	return typeof id==='string'?document.getElementById(id):id;
}

window.onload=tab;

function tab(){
  // 当前高亮显示的页签的索引
  var index=0;
  var timer=null;

  // 获取所有的页签和要切换的内容
  var lis=$('notice-tit').getElementsByTagName('li');
  var divs=$('notice-con').getElementsByTagName('div');
  // 遍历每一个页签且给他们绑定事件
  for(var i=0;i<lis.length;i++){
    lis[i].id=i;
    lis[i].onmouseover=function(){
      clearInterval(timer);
      changeOption(this.id);
    }
    lis[i].onmouseout=function(){  
      timer=setInterval(autoPlay,2000);    
    }
  }
  
  if(timer){
    clearInterval(timer);
    timer=null;
  } 
  // 添加定时器，改变当前高亮的索引
  timer=setInterval(autoPlay,2000);

  function autoPlay(){
      index++;
      if(index>=lis.length){
         index=0;
      }
      changeOption(index);
  }

  function changeOption(curIndex){
    for(var j=0;j<lis.length;j++){
       lis[j].className='';
       divs[j].style.display='none';
    }
    // 高亮显示当前页签
    lis[curIndex].className='select';
    divs[curIndex].style.display='block';
    index=curIndex;
  }
}