在看过锋利的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的自动播放选项卡
BitOrbitMaster
• 阅读
2806
点赞
收藏
