jquery的自动播放选项卡

BitOrbitMaster
• 阅读 2806
在看过锋利的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>
点赞
收藏
评论区
推荐文章
待兔 待兔
11个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Stella981 Stella981
3年前
JQuery
一、jq简介jq其实就是js的一个文件。二、jq书写步骤1、先引入jq文件(min的文件)<scripttype"text/javascript"src"file:///C|/jquery/jquery3.3.1.min.js"</script2、换新的一行写js代码<scripttype"text/javascri
Wesley13 Wesley13
3年前
IOS真机测试
学习了两天的Android开发,我感觉Android开发跟IOS开发和.NET平台下的开发有点不同,Android开发我更觉得跟web(Html)倒是有类似的地方,都是节点标签显示的,当然个人理解,感觉提示也没IOS开以及.NET开发那么强,可能是我还不是太熟悉eclipse开发环境,当然当做出东西能导入到自己的Android机还是挺兴奋的。今天晚上摸索了一
Wesley13 Wesley13
3年前
JQ面试问题(转载)
1你在公司是怎么用jquery的?答:在项目中是怎么用的是看看你有没有项目经验(根据自己的实际情况来回答)你用过的选择器啊,动画啊,表单啊,ajax事件等配置Jquery环境下载jquery类库在jsp页面引用jquery类库即可<scripttype"text/javascript"src"jquery/jquery1.7.2
Stella981 Stella981
3年前
LayaAir使用原生Video视频播放以及Video监听事件
1.原生Video的基本属性src:视频的属性,url地址poster:视频封面,没有播放时显示的图片preload:预加载|none|metadata(部分预加载)|auto。默认为autoautoplay:自动播放loop:循环播放controls:浏览器自带的控制条width:视频宽度height:视频高
Stella981 Stella981
3年前
HTML5+CSS+JS 贪吃蛇demo
我写博客的主要目的就是温习所学的知识,自己以前写的游戏当然不能放过!这款网页版贪吃蛇是大一下册学习网页前端时老师教我们写的,由于那个时候初学网页前端,所以这款游戏是纯原生JavaScript写的,没有使用JQuery。重新看了一遍自己写的代码,大一的我真的太年轻了,一个注释都没有写,幸好这款游戏的逻辑不难,还能看得懂,补了一些注释,对一些细节加深了
Stella981 Stella981
3年前
JavaScript性能优化小知识总结
前言  一直在学习javascript,也有看过《犀利开发Jquery内核详解与实践》,对这本书的评价只有两个字犀利,可能是对javascript理解的还不够透彻异或是自己太笨,更多的是自己不擅于思考懒得思考以至于里面说的一些精髓都没有太深入的理解。  鉴于想让自己有一个提升,进不了一个更加广阔的天地,总得找一个属于自己的居所好好生存,所以平
Stella981 Stella981
3年前
C++11 thread mutex 我怎么感觉我被坑了。
二话不说,直接上代码了。include <threadinclude <iostreaminclude <mutexusing namespace std;volatile int shared_value  0;volatile int running_count  1
Wesley13 Wesley13
3年前
35岁是技术人的天花板吗?
35岁是技术人的天花板吗?我非常不认同“35岁现象”,人类没有那么脆弱,人类的智力不会说是35岁之后就停止发展,更不是说35岁之后就没有机会了。马云35岁还在教书,任正非35岁还在工厂上班。为什么技术人员到35岁就应该退役了呢?所以35岁根本就不是一个问题,我今年已经37岁了,我发现我才刚刚找到自己的节奏,刚刚上路。
Stella981 Stella981
3年前
PythonStudy——魔法函数 Magic Methods
魔法函数python中以双下划线开始和结束的函数(不可自己定义)为魔法函数调用类实例化的对象的方法时自动调用魔法函数(感觉不需要显示调用的函数都叫)在自己定义的类中,可以实现之前的内置函数,比如下面比较元素sorted时用It函数(lt(self,other):判断self对象是否小于other对象;)