Jquery 点击切换，按10秒钟自动切换到下一个，依资助循环，点击按钮也可以切换

这个怎么作，按钮的代码已经写好，就剩切换的，不知道该怎么写了，为了方便看，我没隐藏溢出的，帮我补全代码，谢谢大神http://pan.baidu.com/s/1dDrPz... 这个怎么作，按钮的代码已经写好，就剩切换的，不知道该怎么写了，为了方便看，我没隐藏溢出的，
帮我补全代码，谢谢大神
http://pan.baidu.com/s/1dDrPz1Z 展开

 我来答

1个回答

#热议# 上班途中天气原因受伤算工伤吗？

匿名用户
推荐于2016-09-28

展开全部

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>点击切换，按时间循环自动切换</title>
<style>
* {
	padding: 0;
	margin: 0;
}

body {
	margin: 0;
	padding: 0;
	font: 12px/1.5 \5b8b\4f53, Arial, sans-serif;
}

ol,ul,li {
	list-style: none;
}

a {
	color: #252525;
	text-decoration: none;
}

a:hover {
	color: #ba2636;
	text-decoration: underline;
}

.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}

.clearfix {
	*zoom: 1;
}

.tui2 {
	margin: auto;
	overflow: hidden;
	height: 108px;
	width: 648px;
	position: relative;
	border-top-width: 3px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-color: #37B3D5;
}

.tui2 .tit {
	line-height: 32px;
	padding-left: 12px;
	height: 32px;
}

.tui2 .tit h2 {
	float: left;
	font-size: 14px;
}

.focus {
	height: 16px;
	line-height: 16px;
	overflow: hidden;
	float: right;
	position: relative;
	right: 8px;
	top: 50%;
	margin-top: -8px;
}

.focus li {
	float: left;
	width: 16px;
	height: 16px;
	text-align: center;
	background-color: #A1A1A1;
	display: block;
	color: #FFFFFF;
	margin-left: 5px;
	cursor: pointer;
}

.focus li.on {
	background-color: #68A4DE;
}

.con {
	padding-right: 15px;
	padding-bottom: 15px;
	padding-left: 15px;
	width: 9999em;
	overflow: hidden;
	position: relative;
}

.txt {
	width: 628px;
	float: left;
	margin-right: 8px;
}

.txt li {
	float: left;
	height: 25px;
	width: 148px;
	overflow: hidden;
	line-height: 25px;
	margin-right: 8px;
}

.txt li a {
	font-size: 13px;
	color: #3333FF;
	font-family: Microsoft YaHei;
}

.yun {
	right: 12px;
	position: absolute;
	bottom: 3px;
}

.ml {
	margin-left: -628px;
}
</style>
<script src="../jquery-1.8.0.min.js"></script>
<script>
	jQuery (function ($)
    {
	    var con = $ ('div.con'), len = con.children ("ul").length, w = $ (".txt").width () + 5;
	    var lis = $ ('.focus li'), INDEX = lis.filter (".on").index ();
	    lis.click (function ()
	    {
		    var me = $ (this);
		    me.addClass ("on").siblings ("li").removeClass ("on");
		    con.stop ().animate (
		    {
			    left : -w * (INDEX = me.index ()) + "px"
		    }, "fast");
	    });
	    $ (".tui2").hover (function ()
	    {
		    stop ();
	    }, function ()
	    {
		    run (lis, INDEX);
	    });
	    run (lis, INDEX);
    });
    var INTERVAL = null, SLEEP = 1000, INDEX = -1;
    var run = function (lis, INDEX)
    {
	    if (!INTERVAL)
	    {
		    INTERVAL = setInterval (function ()
		    {
			    INDEX++;
			    INDEX = INDEX > lis.length - 1 ? 0 : INDEX;
			    lis.eq (INDEX).triggerHandler ("click");
		    }, SLEEP);
	    }
    };
    
    var stop = function ()
    {
	    if (!!INTERVAL)
	    {
		    clearInterval (INTERVAL);
		    INTERVAL = null;
	    }
    };
</script>
</head>
<body>
	 
</body>
</html>

已赞过 已踩过<

评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

Jquery 点击切换，按10秒钟自动切换到下一个，依资助循环，点击按钮也可以切换

其他类似问题

为你推荐：