热点新闻滚动

有一系列新闻无限滚动,不会出现跳动,一直想上滚动,可以用li存储信息,然后将第一个li复制一份放到最后一个位置,设置定时器向上滚动,当到达最后一个li时,直接变为第一个li,因为这两个li一样,所以不会看到跳动,就达到了无限滚动的效果。

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>热点切换</title>

<style type="text/css">

    *{

        margin:0 auto;

        padding: 0;

    }

    #news{

        width:300px;

        height:30px;

        border: 2px solid green;

        position: relative;

        top:300px;

        overflow: hidden;

    }

    #news ul{

        position: absolute;

        top:0px;

        left:0px;

    }

    #news ul li{

        /*position: absolute;*/

        

        width: 300px;

        height: 30px;

        list-style: none;

    }

</style>

<script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script>

<script type="text/javascript">

    $(function(){

        var index=0;//定义全局变量,记录li的号数

        setInterval(function(){

            index++;

            if(index==7){//当是第七个li时,执行

                $('#news ul').css('top','0px');//将ul的top变为0

                index=1;//再将号数变为1



            }

            var top=index*-30;//根据号数,计算向上移动多少

            $('#news ul').animate({'top':top+'px'},500);//动态向上滑动

        },1000);

        

    })

</script>

</head>

<body>

 <div id="news">

     <ul>

         <li style="background:green;">汪洋罕见坦承</li>

         <li style="background:red;">山东德州副市长跳楼详情</li>

         <li style="background:blue;">外交部</li>

         <li style="background:yellow;">逾6成受访港人不满政改落空</li>

         <li style="background:orange;">风暴眼</li>

         <li style="background:purple;">台方劝老兵勿参加大陆阅兵</li>

         <li style="background:green;">汪洋罕见坦承</li><!-- 重复第一个li,可以避免跳动的出现 -->

     </ul>

 </div>   

</body>

</html>

 

你可能感兴趣的:(滚动)