SOURCE

console 命令行工具 X clear

                    
>
console
$(function () {
            var i = 0;
            //手动切换
            $("ul li").mouseenter(function () {
                $(this).addClass("hover").siblings().removeClass("hover");
                var index = $(this).index() + 1;//index()搜索匹配的元素,并返回相应元素的索引值,从0开始计数。
                i = index;
                $("#q_" + index).show().siblings("div").hide();
            });
            //自动切换
            var timer = setInterval(setTab, 1000);
            function setTab() {
                i++;
                if (i > 3) {
                    i = 1;
                }
                console.log(i);
                //eq 获取第N个元素
                $("ul li").eq(i-1).addClass("hover").siblings().removeClass("hover");
                $("#q_" + i).show().siblings("div").hide();
            }
            //开启/关闭自动
            $("ul li").mouseover(function () {
                clearInterval(timer);
            })
            $("ul li").mouseout(function () {
                timer = setInterval(setTab, 1000);
            })
            //  //开启/关闭自动 	over out
            /*            $("ul li").hover(
							function () {
								clearInterval(timer);
							},
							function () {
								timer = setInterval(setTab, 1000);
							});*/
        })
<div style="width: 600px;margin: 0 auto; overflow: hidden;position: relative;">
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
	</ul>
	<div id="q_1">1</div>
	<div id="q_2">2</div>
	<div id="q_3">3</div>
</div>
ul {
			width: 500px;
			height: 60px;
			margin: 100px auto 0;
			border: 1px solid red;
			padding: 0;
		}

		li {
			float: left;
			list-style: none;
			width: 33.334%;
			height: 60px;
			text-align: center;
			line-height: 60px;
			margin: auto;
		}

		ul li.hover {
			background-color: #0054af;
		}

		div {
			width: 500px;
			height: 500px;
			margin: 30px auto;
		}

		#q_1 {
			background: red;
		}

		#q_2 {
			background: yellow;
			display: none;
		}

		#q_3 {
			background: blue;
			display: none;
		}