陈华：jquery不转原生javascript实现热点无缝滚动效果代码复用

最新推荐文章于 2024-09-21 11:34:18 发布

陈华编程

最新推荐文章于 2024-09-21 11:34:18 发布

阅读量546

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/sddqe/article/details/45849607

版权

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            *{margin:0; padding:0; border: none;}
            .tab{width: 450px; height: 45px; border:3px solid #CCC; margin:20px auto; position: relative; overflow:hidden;}
            .tab ul{ width: 450px; position: absolute; top:0; left:0;}
            .tab ul li{ height:45px; line-height: 45px; font-size: 18px; font-weight: bold; text-align: center; color:#FFF; list-style:none;}
        </style>
        <script type="text/javascript" src="jquery-1.7.2.min.js"></script>

            /**
             * @Author:      ChenHua
             * @DateTime:    2015-05-19 20:47:00
             * @Description: http://chenhua.wang qq:276004561
             */

        $(function(){
            $('.tab ul').html(function(index,value){
                return value + value;
            })

            $('.tab ul').each(function(){ //初始化jquery参数
                $(this).data("c", 0);
                // $(this).data("timer", null);

                var jqthis = $(this);

                $(this).data("run",function(){
                    if(jqthis.data('c')==5){ //判断断点情况
                        jqthis.data('c',0);
                        jqthis.css('top',0);
                    }
                    // alert(jqthis.data('c'))
                    jqthis.data('c',jqthis.data('c')+1) //序号自增
                    jqthis.animate({'top':-45*jqthis.data('c')},500); //运动
                });
                $(this).data("timer", setInterval($(this).data('run'),1000))
            })

            $('.tab ul').hover(function(){ //上浮事件
                    clearInterval($(this).data("timer"));
                },function(){
                    $(this).data("timer", setInterval($(this).data('run'),1000))
            })

        })
        </script>
    </head>
    <body>
        <div class="tab">
            <ul>
                <li style="background:red">我是 1 号新闻轮播内容</li>
                <li style="background:blue">我是 2 号新闻轮播内容</li>
                <li style="background:yellow">我是 3 号新闻轮播内容</li>
                <li style="background:green">我是 4 号新闻轮播内容</li>
                <li style="background:orange">我是 5 号新闻轮播内容</li>
            </ul>
        </div>

        <div class="tab">
            <ul>
                <li style="background:red">我是 1 号新闻轮播内容</li>
                <li style="background:blue">我是 2 号新闻轮播内容</li>
                <li style="background:yellow">我是 3 号新闻轮播内容</li>
                <li style="background:green">我是 4 号新闻轮播内容</li>
                <li style="background:orange">我是 5 号新闻轮播内容</li>
            </ul>
        </div>

        <div class="tab">
            <ul>
                <li style="background:red">我是 1 号新闻轮播内容</li>
                <li style="background:blue">我是 2 号新闻轮播内容</li>
                <li style="background:yellow">我是 3 号新闻轮播内容</li>
                <li style="background:green">我是 4 号新闻轮播内容</li>
                <li style="background:orange">我是 5 号新闻轮播内容</li>
            </ul>
        </div>

    </body>
</html>