原生js实现的3个小特效(时钟轮播图选项卡)

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了原生js实现的3个小特效(时钟轮播图选项卡)相关的知识,希望对你有一定的参考价值。

时钟:

        <p id="timeTxt"></p>  //将获取到的时间显示在timeTxt这里面
        <button onclick="startTime()">关闭</button>
        <!--时钟-->
        function startTime(){  //创建startTime()函数
            var today=new Date();  //定义一个对象today承载当前时间
            var h=today.getHours(); //获取到时
            var m=today.getMinutes();  //获取分
            var s=today.getSeconds();  //获取秒
            m=checkTime(m);
            s=checkTime(s);
            document.getElementById("timeTxt").innerhtml=h+":"+m+":"+s;
            t=setTimeout(function (){
                startTime();
            },1000);//每隔1s重新获取当前时间
        }
        function checkTime(i){//判断当前的分钟数和秒数是否小于10
            if(i<10){
                i="0"+i;  //小于10的时候在前面加上0
            }
            return i;  //否则直接返回i
        }
        </script>

轮播图:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>原生js实现轮播图</title>
        <style type="text/css">
            div,ul,body{margin:0;padding:0;}
            ul,li{list-style:none;list-style-type:none;}
            #box{
                position:relative;
                font-size:12px;
                font-family:"Arial";
                width:482px;
                height:322px;
                border:8px solid #FF9900;
                border-radius:10px;
                margin:20px auto;
            }
            .imglist{
                width:480px;
                height:320px;
                border:1px solid #000;
                position:relative;
                overflow:hidden;
            }
            .imglist li{
                width:480px;
                height:320px;
                position:absolute;
                left:0;
                top:0;
                opacity:0;
                transition:opacity 0.8s linear;
                cursor:pointer;
            }
            .imglist li.current{opacity:1;}
            .imglist li img{
                display:block;
                width:480px;
                height:320px;
            }
            .countlist{
                position:absolute;
                right:10px;
                bottom:5px;
                clear:both;
            }
            .countlist li{
                float:left;
                margin:0 5px;
                width:20px;
                height:20px;
                line-height:20px;
                text-align:center;
                background:palevioletred;
                border-radius:100%;
                border-radius:10px;
                opacity:0.8;
                cursor:pointer;
            }
            .countlist li.active,.countlist li:hover{background:brown;color:#fff;}
        </style>
    </head>
    <body>
        <div id="box">
            <ul class="imglist">
                <li class="current"><img src="img/4.jpg" /></li>
                <li><img src="img/6.jpg" /></li>
                <li><img src="img/7.jpg" /></li>
                <li><img src="img/4.jpg" /></li>
                <li><img src="img/8.jpg" /></li>
            </ul>
            <ul class="countlist">
                <li class="active">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>
        </div>
        <script type="text/javascript">
            var box=document.getElementById("box");
            var uls=box.getElementsByTagName("ul");
            var imglist=uls[0].getElementsByTagName("li");
            var btnlist=uls[1].getElementsByTagName("li");
            var i=index=0;
            var play=null;
            //console.log(box,uls,imglist,btnlist);
            function show(a){
                for(i=0;i<imglist.length;i++){
                    imglist[i].style.opacity=0;
                    imglist[a].style.opacity=1;
                }
                for(i=0;i<btnlist.length;i++){
                    btnlist[i].className="";
                    btnlist[a].className="active";
                }
            }
            for(i=0;i<btnlist.length;i++){
                btnlist[i].index=i;
                btnlist[i].onmouseover=function (){
                    show(this.index);
                    clearInterval(play);
                }
            }
            function autoplay(){
                play=setInterval(function (){
                    index++;
                    index>=imglist.length&&(index=0);  //如果index>=imgList.length,则index=0;
//                    "与 Java 中的逻辑 AND 运算相似,ECMAScript 中的逻辑 AND 运算也是简便运算,
//                    即如果第一个运算数决定了结果,就不再计算第二个运算数。对于逻辑 AND 运算来说,
//                    如果第一个运算数是 false,那么无论第二个运算数的值是什么,结果都不可能等于 true。"
                    show(index);
                },3000);
            }
            autoplay();
            box.onmouseover=function (){
                clearInterval(play);
            };
            box.onmouseout=function (){
                autoplay();
            }
        </script>
    </body>
</html>

选项卡:(样式比较丑,我也比较懒得改了)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>tab选项卡</title>
        <script type="text/javascript">
            window.onload=function (){
                var c=0;
                var tablist=document.getElementById("tablist");
                var a1=tablist.getElementsByTagName("a");
                var list=document.getElementById("list");
                var listUl=list.getElementsByTagName("ul");
                for(var j=0;j<a1.length;j++){
                    a1[j].m=j;
                    a1[j].onclick=function (){
                        c=j;
                        for(var k=0;k<a1.length;k++){
                            a1[k].className="";
                            listUl[k].style.display="none";
                        }
                        this.className="active";
                        listUl[this.m].style.display="block";
                    }
                }
            }
        </script>
        <style type="text/css">
            a{text-decoration:none;font-size:14px;}
            .active{background:red;}
        </style>
    </head>
    <body>
        <div id="tablist">
            <a href="#" class="active">111111</a>
            <a href="#">222222</a>
            <a href="#">333333</a>
        </div>
        <div id="list">
            <ul>
                <li>111111111</li>
                <li>111111111</li>
                <li>111111111</li>
                <li>111111111</li>
                <li>111111111</li>
            </ul>
            <ul style="display:none;">
                <li>222222222</li>
                <li>222222222</li>
                <li>222222222</li>
                <li>222222222</li>
                <li>222222222</li>
            </ul>
            <ul style="display:none;">
                <li>333333333</li>
                <li>333333333</li>
                <li>333333333</li>
                <li>333333333</li>
                <li>333333333</li>
            </ul>
        </div>
    </body>
</html>















































































































































































































以上是关于原生js实现的3个小特效(时钟轮播图选项卡)的主要内容,如果未能解决你的问题,请参考以下文章

原生JS面向对象思想封装轮播图组件

轮播图案例

纯JS实现轮播图特效——详解

11-项目:JS实现轮播图特效

JS实现轮播图特效(带二级导航)

js之pc端网页特效三