jquery的自动播放选项卡

最新推荐文章于 2024-07-03 02:53:04 发布

weixin_34029949

最新推荐文章于 2024-07-03 02:53:04 发布

阅读量154

点赞数 1

文章标签： javascript ViewUI

原文链接：https://segmentfault.com/a/1190000007986688

版权

在看过锋利的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>

weixin_34029949

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery的自动播放选项卡

在看过锋利的jQuery那边书之后，感觉自己的jq水平确实有了进步，我没给最外层的盒子宽度所以默认100%了，移到下面可以继续自动播放，没有封装，感觉自己的基本功更扎实了，加油。<!DOCTYPE html><html lang="en"><head> <meta charset="U...
复制链接

扫一扫