原代码不变,在JS中增加定时切换代码

Question

原代码只可以点击切换，要求原代码中的参数不能变，实现以下功能：
1、增加个每5秒自动切换。
2、如果鼠标移动到某导航上时等待0.5秒再切换到该导航(原因:避免鼠标移动到上面就切换，体验不好)
以下是代码：
<li onClick="changeaweb(this,'1')" class ="a1">导航A</li>
<li onClick="changeaweb(this,'2')" class ="b1">导航B</li>
<li onClick="changeaweb(this,'3')" class ="c1">导航C</li>
<li onClick="changeaweb(this,'4')" class ="d1">导航D</li><div  id="web1"  style="display:block;"></div>
<div  id="web2"  style="display:none;"></div>
<div  id="web3"  style="display:none;"></div>
<div  id="web4"  style="display:none;"></div><script>
function changeaweb(srcObj, tid) {
    var tabList = srcObj.parentNode.getElementsByTagName("li");
    if (srcObj.className == 'a1') return;
    for (var i = 0; i < tabList.length; i++) {
        if (tabList[i].className == 'a1') 
tabList[i].className = 'b1';
        tabList[i].className = 'c1';
tabList[i].className = 'd1';
    document.getElementById("web" + (i + 1)).style.display = 'none';
    }
    document.getElementById("web" + tid).style.display = '';
    srcObj.className = 'a1';
    return false;
}
</script>
给个参考的，因不可输入网址。百度搜索：宏基    如果能做出这个效果感谢万分JavaScript切换

Answer 1

<script type="text/javascript">
        function changeaweb(srcObj, tid) {
            var tabList = srcObj.parentNode.getElementsByTagName("li");
            if (srcObj.className == 'a1') return;
            for (var i = 0; i < tabList.length; i++) {
                if (tabList[i].className == 'a1') 
        tabList[i].className = 'b1';
                tabList[i].className = 'c1';
        tabList[i].className = 'd1';
            document.getElementById("web" + (i + 1)).style.display = 'none';
            }
            document.getElementById("web" + tid).style.display = '';
            srcObj.className = 'a1';
            return false;
        }
        var obj = document.getElementById("ul").getElementsByTagName("li");
        var timeout;
        for (var i = 0; i < obj.length; i++) {
            (function(i) {
                obj[i].onmouseover = function() {
                    var obj = this;
                    clearTimeout(timeout);
                    timeout = setTimeout(function() {
                        changeaweb(obj, i + 1);
                    }, 500);
                };
                obj[i].onmouseout = function() {
                    clearTimeout(timeout);
                };
            })(i);
        }
    </script>

Answer 2

楼上忘了还有自动切换， 我改了下<script type="text/javascript">
        function changeaweb(srcObj, tid) {
            var tabList = srcObj.parentNode.getElementsByTagName("li");
            if (srcObj.className == 'a1') return;
            for (var i = 0; i < tabList.length; i++) {
                if (tabList[i].className == 'a1') 
        tabList[i].className = 'b1';
                tabList[i].className = 'c1';
        tabList[i].className = 'd1';
            document.getElementById("web" + (i + 1)).style.display = 'none';
            }
            document.getElementById("web" + tid).style.display = '';
            srcObj.className = 'a1';
            return false;
        }        var tabs = {
            liList: null,
            autoTime: 1000,
            mouseTime: 500,
            timeObj: null,
            index: 0,
            doInit: function() {
                this.liList = document.getElementById("ul").getElementsByTagName("li");
                this.bindEvent();
                this.auto();
            },
            bindEvent: function() {
                for (var i = 0; i < this.liList.length; i++) {
                    (function(i, tab) {
                        tab.liList[i].onmouseover = function() {
                            var obj = this;
                            clearTimeout(tab.timeObj);
                            tab.timeObj = setTimeout(function() {
                                changeaweb(obj, i + 1);
                                tab.index = i;
                            }, tab.mouseTime);
                        };
                        tab.liList[i].onmouseout = function() {
                            clearTimeout(tab.timeObj);
                            tab.auto();
                        };
                    })(i, this);
                }
            },
            auto: function(srcObj, tid) {
                (function(tab) {
                    tab.timeObj = setInterval(function() {
                    tab.index++;
                    tab.index = tab.index < tab.liList.length ? tab.index : 0;
                        changeaweb(tab.liList[tab.index], tab.index + 1);
                    }, tab.autoTime);
                })(this);
            }
        };
        tabs.doInit();
    </script>

Answer 3

朋友那这里需要怎么修改了？<li onClick="changeaweb(this,'1')" class ="a1">导航A</li>
<li onClick="changeaweb(this,'2')" class ="b1">导航B</li>
<li onClick="changeaweb(this,'3')" class ="c1">导航C</li>
<li onClick="changeaweb(this,'4')" class ="d1">导航D</li><div  id="web1"  style="display:block;"></div>
<div  id="web2"  style="display:none;"></div>
<div  id="web3"  style="display:none;"></div>
<div  id="web4"  style="display:none;"></div>

Answer 4

嗯 非常满意 朋友感谢了   还有个问题 鼠标移动在这上面时<div  id="web1"  style="display:block;"></div>暂止自动切换，离开时再继续