Jquery 点击切换，按10秒钟自动切换到下一个，依资助循环，点击按钮也可以切换
这个怎么作，按钮的代码已经写好，就剩切换的，不知道该怎么写了，为了方便看，我没隐藏溢出的，帮我补全代码，谢谢大神http://pan.baidu.com/s/1dDrPz...
这个怎么作，按钮的代码已经写好，就剩切换的，不知道该怎么写了，为了方便看，我没隐藏溢出的，
帮我补全代码，谢谢大神
http://pan.baidu.com/s/1dDrPz1Z 展开
帮我补全代码，谢谢大神
http://pan.baidu.com/s/1dDrPz1Z 展开
展开全部
<!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>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
