Jquery切换代码，点击按钮会切换到下一组，但是点到最后一组自动跳到第一组
要怎么弄，弄个5秒自动切换到下一组的功能，大神帮看看，谢谢http://pan.baidu.com/s/1jGBYdgi...
要怎么弄，弄个5秒自动切换到下一组的功能，大神帮看看，谢谢
http://pan.baidu.com/s/1jGBYdgi 展开
http://pan.baidu.com/s/1jGBYdgi 展开
3个回答
展开全部
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>自制向上滚动</title>
<style>
* {
margin: 0;
padding: 0;
}
ul,li {
list-style-type: none;
}
.rcoll {
width: 380px;
margin: auto;
border: 1px solid #505050;
box-shadow: 3px 3px 3px #505050;
overflow: hidden;
height: 162px;
position: relative;
padding-right: 8px;
padding-left: 12px;
}
.btn {
line-height: 32px;
font-weight: bold;
color: #FFFFFF;
background-color: #0099FF;
height: 32px;
width: 88px;
text-align: center;
margin: 10px 0px 0px 470px;
}
.btn:hover {
background-color: #FF3366;
cursor: pointer;
}
.rcoll .con {
position: absolute;
top: 5px;
height: 162px;
}
.rcoll ul {
margin-bottom: 3px;
}
.rcoll li {
line-height: 32px;
height: 32px;
float: left;
width: 241px;
overflow: hidden;
}
.rcoll .pic {
float: left;
margin-right: 8px;
}
.rcoll li a {
font-size: 12px;
color: #000000;
text-decoration: none;
}
.rcoll li a:hover {
color: #FF0033;
text-decoration: underline;
}
.rcoll img {
width: 124px;
height: 154px;
}
</style>
<script src="../jquery-1.8.0.min.js"></script>
<script>
jQuery (function ($)
{
var btn = $ (".btn"), con = $ ('.con'), roll = $ (".rcoll"), h = roll.height () - 2, len = con.children ("ul").length - 1;
btn.click (function ()
{
var top = parseFloat (con.css ("top")) || con.prop ("offsetTop");
top -= h;
top = top < -h * len ? 5 : top;
con.animate (
{
top : top + 'px'
}, "fast");
});
$ (".wrap").hover (function ()
{
stop ();
}, function ()
{
run (btn);
});
run (btn);
});
var run = function (btn)
{
if (!window.interval)
{
window.interval = setInterval (function ()
{
btn.triggerHandler ("click");
}, 1000);
}
};
var stop = function ()
{
if (!!window.interval)
{
clearInterval (window.interval);
window.interval = null;
}
};
</script>
</head>
<body>
<div class="wrap">
<div class="rcoll">
<div class="con">
<ul>
<div class="pic">
<img src="http://s1.dwstatic.com/group1/M00/7B/D5/7bd5a2d709cac6f003e55513fa8aefcf8538.jpg" />
</div>
<li><a href="/1402/256578077209.html" title="玩家分享：只用蒙多从白银直接冲上钻2">玩家分享：只用蒙多从白银直接冲上钻2</a></li>
<li><a href="/1401/255001014734.html" title="想去哪就去哪 1个月蒙多白银到钻2之路">想去哪就去哪 1个月蒙多白银到钻2之路</a></li>
<li><a href="/1401/253909236194.html" title="能抗能打还能跑 拳头暴君打野蒙多攻略">能抗能打还能跑 拳头暴君打野蒙多攻略</a></li>
<li><a href="/1312/251564036306.html" title="蒙多想干谁就干谁！S4王者组上单蒙多攻略">蒙多想干谁就干谁！S4王者组上单蒙多攻略</a></li>
<li><a href="/1302/225217823121.html" title="大型蒙多攻略：野区大混想去哪就去哪">大型蒙多攻略：野区大混想去哪就去哪</a></li>
</ul>
<ul>
<div class="pic">
<img src="http://s1.dwstatic.com/group1/M00/11/2E/3bdc03742def9dc433c7b6187223e790.jpg" />
</div>
<li><a href="/1401/252937708779.html" title="暴力游走 C9 Meteos食肉型打野蜘蛛攻略">暴力游走 C9 Meteos食肉型打野蜘蛛攻略</a></li>
<li><a href="/1301/221658050965.html" title="万金油全能AP英雄 蜘蛛女皇伊莉丝攻略">万金油全能AP英雄 蜘蛛女皇伊莉丝攻略</a></li>
<li><a href="/1212/219263469205.html" title="TPA上单Stanley的蜘蛛女皇伊莉丝出装心得">TPA上单Stanley的蜘蛛女皇伊莉丝出装心得</a></li>
<li><a href="/1212/218803728640.html" title="玩家心得：蜘蛛女皇伊莉丝出装打法分析">玩家心得：蜘蛛女皇伊莉丝出装打法分析</a></li>
<li><a href="/1211/218221990729.html" title="毒液？蛛网？蜘蛛女皇伊莉丝经验分享">毒液？蛛网？蜘蛛女皇伊莉丝经验分享</a></li>
</ul>
<ul>
<div class="pic">
<img src="http://s1.dwstatic.com/group1/M00/0E/D5/2823aa7b5b61d2dbfb59fc44fabc6081.jpg" />
</div>
<li><a href="/1404/262689866351.html" title="灭世孽火团战毁灭者 复仇焰魂攻略分享">灭世孽火团战毁灭者 复仇焰魂攻略分享</a></li>
<li><a href="/1401/254757054966.html" title="进入火焰世界 美服钻1玩家火人攻略">进入火焰世界 美服钻1玩家火人攻略</a></li>
<li><a href="/1212/220546336845.html" title="中单超级爆发法师！布兰德S3全面解析">中单超级爆发法师！布兰德S3全面解析</a></li>
<li><a href="/1205/200332411016.html" title="复仇焰魂精品攻略 被大家遗忘的强力APC">复仇焰魂精品攻略 被大家遗忘的强力APC</a></li>
<li><a href="/1112/186762891061.html" title="火人布兰德技巧：解析对线与团战要点">火人布兰德技巧：解析对线与团战要点</a></li>
</ul>
<ul>
<div class="pic">
<img src="http://s1.dwstatic.com/group1/M00/C4/43/4aa35a4ea2d41f3313ef38b2a4d8f519.jpg" />
</div>
<li><a href="/1402/257531558182.html" title="外服钻石玩家分享：重做后的泽拉斯攻略">外服钻石玩家分享：重做后的泽拉斯攻略</a></li>
<li><a href="/1209/212770681936.html" title="来自视野之外的杀机 远古巫灵泽拉斯攻略">来自视野之外的杀机 远古巫灵泽拉斯攻略</a></li>
<li><a href="/1208/207938476126.html" title="多玩强人攻略：冷门的炮台泽拉斯技能剖析">多玩强人攻略：冷门的炮台泽拉斯技能剖析</a></li>
<li><a href="/1202/192105464735.html" title="我常年T1却被国服遗忘 远古巫灵攻略">我常年T1却被国服遗忘 远古巫灵攻略</a></li>
<li><a href="/1112/188563204993.html" title="团战T1法师远古巫灵泽拉斯 单排激光重炮">团战T1法师远古巫灵泽拉斯 单排激光重炮</a></li>
</ul>
</div>
</div>
<div class="btn">换一换</div>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<style>
.slide{width: 400px;height: 200px;overflow: hidden;background: #000;}
.slide ul li{text-align: center;font-size: 30px;padding-top: 50px;height: 200px;color: #fff;}
.slide_btn{display: block;background: #ccc;color: #fff;width: 100px;padding: 10px 0;text-align: center;}
</style>
<body>
<!-- 一个简单例子 -->
<div class="slide">
<ul>
<li>11111111111</li>
<li>22222222222</li>
<li>33333333333</li>
<li>44444444444</li>
</ul>
</div>
<a class="slide_btn" href="javascript:;">换一换</a>
<script type="text/javascript">
$(function(){
var n = 0,act;
var lengths = $('.slide ul li').length;
$('.slide_btn').click(function() {
n+=1;
if(n==lengths){
n=0;
}
$('.slide ul li').eq(n).show().siblings('li').hide();;
});
//禁止点击换一换和自动换一起执行
$('.slide_btn').hover(function() {
clearInterval(act);
}, function() {
act = setInterval(function(){
n+=1;
if(n==lengths){
n=0;
}
$('.slide ul li').eq(n).show().siblings('li').hide();;
},5000)
});
})
</script>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
就是轮播图吧，你搜下轮播图就知道了啊。设置setInterval间隔5秒，button绑定动画切换
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
