jQuery实现轮播效果

最新推荐文章于 2018-05-02 09:38:09 发布

西红柿炒番茄AB

最新推荐文章于 2018-05-02 09:38:09 发布

阅读量440

点赞数 1

分类专栏：前端 jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/a_sid/article/details/53485445

版权

前端同时被 2 个专栏收录

35 篇文章 0 订阅

订阅专栏

jQuery

9 篇文章 0 订阅

订阅专栏

<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <style>ul,li,div {margin: 0px;padding: 0px;}

            ul {list-style: none;}

            ul li {height: 50px;}

            div {width: 700px;
                 height: 400px;
                 overflow: hidden;}

            li.c1 {background-color: #ddd;}

            li.c2 {background-color: red;}

            li.c3 {background-color: blue;}

            li.c4 {background-color: green;}

            li.c5 {background-color: yellow;}

            li.c6 {background-color: #f0c;}

            li.c7 {background-color: #fc0;}
        </style>
        <script src="./jquery-2.2.4.min.js"></script>
        <script >

            $(function() {
                setInterval(function() {
                    //每隔1秒将ul的最后一节点隐藏，然后追加到ui最前面，并展示出来
                    $("ul li:last").hide().prependTo("ul").slideDown("slow");
                }, 1000);
            });



        </script>
    </head>

    <body>
        <h2 id="hid">jQuery实例:轮播特效</h2>
        <div>
            <ul>
                <li class="c1"></li>
                <li class="c2"></li>
                <li class="c3"></li>
                <li class="c4"></li>
                <li class="c5"></li>
                <li class="c6"></li>
                <li class="c7"></li>
            </ul>
        </div>
    </body>

</html>