脚本宝典收集整理的这篇文章主要介绍了jquery的自动播放选项卡，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
在看过锋利的jQuery那边书之后，感觉自己的jq水平确实有了进步，我没给最外层的盒子宽度所以默认100%了，移到下面可以继续自动播放，没有封装，感觉自己的基本功更扎实了，加油。
<!DOCTYPE htML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/jquery-1.12.3.min.js"></script>
<style>
.box div {
width:200px;
height:200px;
border: 1px solid #000;
display: none;
}
.box input.active {
background: yellow;
}
.box div.on{
display: block;
}
</style>
</head>
<body>
<div class="box">
<input class="active" type="button" value="按钮1">
<input type="button" value="按钮2">
<input type="button" value="按钮3">
<div class="on">昨天是2017年的元旦</div>
<div>今天是2017年的第二天</div>
<div>加油加油</div>
</div>
<script>
$(function(){
$('input').click(function(){
$(this).addClass('active').siblings().removeClass('active');
$('.box>div').eq($(this).index()).addClass('on').siblings().removeClass('on');
});
// 自动播
function move(){
i++;
$('input').eq(i).addClass('active').siblings().removeClass('active');
$('.box>div').eq(i).addClass('on').siblings().removeClass('on');
if(i==2){
i=-1;
}
}
var timer = null;
var i = 0;
timer = setInterval(move,1000);
$('.box').mouseover(function(){
clearInterval(timer);
});
$('.box').mouseout(function(){
timer = setInterval(move,1000);
})
});
</script>
</body>
</html>以上是脚本宝典为你收集整理的jquery的自动播放选项卡全部内容，希望文章能够帮你解决jquery的自动播放选项卡所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。