基于jquery的无缝循环新闻列表

港控/mmm° 2022-04-13 14:11 207阅读 0赞

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
      
    <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
        <title>  
            无缝循环新闻列表  
        </title>  
        <link rel="stylesheet" type="text/css" href="css/newslist.css" />  
        <script language="javascript" src="js/jquery1.4.js">  
        </script>  
        <script language="javascript" src="js/newsList.js">  
        </script>  
        <script language="javascript">  
            $(document).ready(function() \{  
                $("\#newslist").newsList();  
            \});  
        </script>  
    </head>  
      
    <body>  
        <div style="width:560px; margin:20px auto">  
              
            <div id="newslist">  
                <div style="background:url(images/slideshow2/slideshow2bg.gif) no-repeat; height:29px;">  
                </div>  
                <div class="go\_upanddown">  
                    <span class="go\_uplist">  
                        <img src="images/newslist/goupbtn.gif" />  
                    </span>  
                    <span class="go\_downlist">  
                        <img src="images/newslist/godownbtn.gif" />  
                    </span>  
                </div>  
                <div class="news\_list\_bar">  
                    <ul class="ul\_news\_list">  
                        <li>  
                            <a href="\#">  
                                1、曾参加过唐山、汶川、玉树地震救援的援  
                            </a>  
                            <a href="\#">  
                                曾参加过唐，又来到了舟曲参加救援  
                            </a>  
                        </li>  
                        <li>  
                            <a href="\#">  
                                2、摩洛哥塞拉，艺术家在一场为流浪儿童为流浪儿童为流浪儿童为流浪儿童募捐的马戏节目中表演  
                            </a>  
                        </li>  
                        <li>  
                            <a href="\#">  
                                3、昆明警方近日县的“洪兴甸县的“洪兴甸县的“洪兴甸县的“洪兴帮”黑恶势力团伙，缴获...  
                            </a>  
                        </li>  
                        <li>  
                            <a href="\#">  
                                4、印度克什知自己的孩子在骚乱中丧生时痛不欲生..  
                            </a>  
                            <a href="\#">  
                                曾参加过唐曾参加过唐到了舟曲参加救援  
                            </a>  
                        </li>  
                        <li>  
                            <a href="\#">  
                                5、明昆明警方近日捣毁了寻甸县的“洪兴帮”黑恶势力团伙，缴获...  
                            </a>  
                        </li>  
                        <li>  
                            <a href="\#">  
                                6、曾参加过唐曾参加过唐曾参加过唐曾参加过唐  
                            </a>  
                        </li>  
                        <li>  
                            <a href="\#">  
                                7、湖北武汉汉口汉口曾参加过唐曾参加过唐曾参加过唐曾参加过唐观看两江洪峰过  
                            </a>  
                        </li>  
                        <li>  
                            <a href="\#">  
                                8、湖北武汉汉曾参加过唐曾参加过唐曾参加过唐曾参加过唐集在江边观  
                            </a>  
                        </li>  
                        <li>  
                            <a href="\#">  
                                9、湖北武汉汉口汉口龙王庙景区观景平台上，市民聚集在江边观看两江洪峰过汉  
                            </a>  
                        </li>  
                    </ul>  
                    <ul class="ul\_news\_list2">  
                    </ul>  
                </div>  
                <div style="background:url(images/slideshow2/v3\_picture21.gif) no-repeat; height:7px;">  
                </div>  
            </div>  
              
        </div>  
    </body>

</html>

/\*  
 \* write by waitingbar  
 \* time 2011.03.04  
 \*  
 \*/  
  
  
(function($) \{  
    $.fn.extend(\{  
        newsList: function(options) \{  
            var defaults = \{  
                actName: 'li',  
                //显示条数名；  
                maxShowNum: '6',  
                //最多的显示条数；  
                actNameH: '28',  
                //一次移动的距离；  
                ulClass: '.ul\_news\_list',  
                //被复制层的class  
                copyUlClass: '.ul\_news\_list2',  
                //复制层的class  
                autoTime: '1500',  
                //自动运行时间；  
                clickGoUpC: '.go\_uplist',  
                //点击向上class;   
                clickDownUpC: '.go\_downlist',  
                //点击向下class;   
                goStart: 'go\_tart',  
                autoCloss: 'flase' //自动运行开关,当为'flase'时为开，其它则关；  
            \}  
  
  
            options = $.extend(defaults, options);  
  
  
            return this.each(function() \{  
                var o = options;  
                var counts = 1;  
                var linum = $($(this).find(o.actName), $(this)).size();  
                var ul\_class = $($(this).find(o.ulClass), $(this));  
                var copy\_ul\_class = $($(this).find(o.copyUlClass), $(this));  
                var click\_go\_up\_c = $($(this).find(o.clickGoUpC), $(this));  
                var click\_go\_down\_C = $($(this).find(o.clickDownUpC), $(this));  
                var go\_start = $($(this).find(o.goStart), $(this));  
  
  
                if (linum > o.maxShowNum) \{  
                    $(copy\_ul\_class).html($(ul\_class).html());  
                    goStartList();  
                \}  
  
  
                var thiswrap = $($(ul\_class).parent().parent(), $(this));  
  
  
                //自动运行函数  
                function auto\_function() \{  
                    if (counts <= linum) \{  
                        $(ul\_class).animate(\{  
                            top: '-=' + o.actNameH  
                        \},  
                        o.autoTime);  
                        $(copy\_ul\_class).animate(\{  
                            top: '-=' + o.actNameH  
                        \},  
                        o.autoTime);  
                        counts++;  
                    \} else \{  
                        $(ul\_class).animate(\{  
                            top: 0  
                        \},  
                        0);  
                        $(copy\_ul\_class).animate(\{  
                            top: 0  
                        \},  
                        0);  
                        counts = 1;  
                    \}  
                \}  
  
  
                //点击向上移动时；  
                if (linum > o.maxShowNum) \{  
                    $(click\_go\_up\_c).click(function() \{  
                        if (counts <= linum) \{  
                            $(ul\_class).animate(\{  
                                top: '-=' + o.actNameH  
                            \},  
                            0);  
                            $(copy\_ul\_class).animate(\{  
                                top: '-=' + o.actNameH  
                            \},  
                            0);  
                            counts++;  
                        \} else \{  
                            $(ul\_class).animate(\{  
                                top: 0  
                            \},  
                            0);  
                            $(copy\_ul\_class).animate(\{  
                                top: 0  
                            \},  
                            0);  
                            counts = 1;  
                        \}  
                    \});  
                \}  
  
  
                //点击向下移动时；  
                if (linum > o.maxShowNum) \{  
                    $(click\_go\_down\_C).click(function() \{  
                        if (counts > 1) \{  
                            counts--;  
                            $(ul\_class).animate(\{  
                                top: '-' + counts \* o.actNameH  
                            \},  
                            0);  
                            $(copy\_ul\_class).animate(\{  
                                top: '-' + counts \* o.actNameH  
                            \},  
                            0);  
                        \} else \{  
                            $(ul\_class).animate(\{  
                                top: 0  
                            \},  
                            0);  
                            $(copy\_ul\_class).animate(\{  
                                top: 0  
                            \},  
                            0);  
                            counts = linum + 1;  
                        \}  
                    \});  
                \}  
  
  
                //鼠标经过所发生的开始停止；  
                if (linum > o.maxShowNum) \{  
                    $(thiswrap).hover(function() \{  
                        goStopList();  
                    \},  
                    function() \{  
                        goStartList();  
                    \});  
                \}  
  
  
                function goStartList() \{  
                    if (o.autoCloss === 'flase') \{  
                        go\_start = setInterval(auto\_function, o.autoTime);  
                    \}  
                \}  
  
  
                function goStopList() \{  
                    clearInterval(go\_start);  
                \}  
            \});  
        \}  
    \});  
\} (jQuery));

@charset "utf-8";  
/\* CSS Document \*/  
body \{ font-family:"微软雅黑",Arial,"Lucida Grande", Verdana, Lucida; font-size:12px; \}  
\*\{ padding:0; margin:0;\}  
img \{ border:0;\}  
.clear \{ clear:both;\}  
a \{ color:\#000; text-decoration:none;\}  
a:hover \{ color:\#EC6104;  text-decoration:none;\}  
.undis \{ display:none;\}/\*news\_list\*/  
.news\_list\_bar \{ position:relative;  width:560px; height:168px; overflow:hidden; background:url(../images/slideshow2/v3\_picture6.gif) repeat-y; background-color:\#F00;\}  
.ul\_news\_list,  
.ul\_news\_list2\{ position:relative; list-style:none;\}  
.ul\_news\_list li,  
.ul\_news\_list2 li\{line-height:28px;  height:28px; width:500px; overflow:hidden; white-space:nowrap;padding:0 20px;\}  
.ul\_news\_list li a,  
.ul\_news\_list2 li a\{ padding-right:20px;\}  
.go\_upanddown \{ position:absolute; margin:-20px 0 0 500px;\}  
.go\_upanddown span \{ padding-right:10px; cursor:pointer;\}