javascript写的新闻滚动代码

 1 <div class="tz_tagcgnewcontent">
 2   <div id="feature-slide-block">
 3     <div class="tz_newlist">
 4       <div class="tz_newimg"><img src="images/tz_img03.jpg" /></div>
 5       <div class="tz_newcontent"> 
 6         <!--新闻标题只显示2行 截取字符串-->
 7         <div class="tz_newtitle">为什么说腾讯的兴趣社交必然失败1？</div>
 8         <!--新闻内容只显示3行 截取字符串-->
 9         <div class="tz_newdes">腾讯基于强联系的社交关系很难能成为兴趣社交的基石，或许这次尝试将会成为腾讯在社交领域继腾讯微博之后的又一次失败。</div>
10       </div>
11     </div>
12     <div class="tz_newlist" style="display: none; ">
13       <div class="tz_newimg"><img src="images/tz_img03.jpg" /></div>
14       <div class="tz_newcontent"> 
15         <!--新闻标题只显示2行 截取字符串-->
16         <div class="tz_newtitle">为什么说腾讯的兴趣社交必然失败2？</div>
17         <!--新闻内容只显示3行 截取字符串-->
18         <div class="tz_newdes">腾讯基于强联系的社交关系很难能成为兴趣社交的基石，或许这次尝试将会成为腾讯在社交领域继腾讯微博之后的又一次失败。</div>
19       </div>
20     </div>
21     <div class="tz_newlist" style="display: none; ">
22       <div class="tz_newimg"><img src="images/tz_img03.jpg" /></div>
23       <div class="tz_newcontent"> 
24         <!--新闻标题只显示2行 截取字符串-->
25         <div class="tz_newtitle">为什么说腾讯的兴趣社交必然失败3？</div>
26         <!--新闻内容只显示3行 截取字符串-->
27         <div class="tz_newdes">腾讯基于强联系的社交关系很难能成为兴趣社交的基石，或许这次尝试将会成为腾讯在社交领域继腾讯微博之后的又一次失败。</div>
28       </div>
29     </div>
30     <div class="tz_newlist" style="display: none; ">
31       <div class="tz_newimg"><img src="images/tz_img03.jpg" /></div>
32       <div class="tz_newcontent"> 
33         <!--新闻标题只显示2行 截取字符串-->
34         <div class="tz_newtitle">为什么说腾讯的兴趣社交必然失败4？</div>
35         <!--新闻内容只显示3行 截取字符串-->
36         <div class="tz_newdes">腾讯基于强联系的社交关系很难能成为兴趣社交的基石，或许这次尝试将会成为腾讯在社交领域继腾讯微博之后的又一次失败。</div>
37       </div>
38     </div>
39     <div id="feature-slide-list" class="tz_newpage"> <a href="#" id="feature-slide-list-previous" class="tz_newpre"></a>
40       <div id="feature-slide-list-items" class="tz_newpg"> </div>
41       <a href="#" id="feature-slide-list-next" class="tz_newnext"></a> </div>
42   </div>
43   <script type="text/javascript">
44       initFeatureSlide();
45   </script> 
46 </div>

 1 .tz_tagcgnewcontent{ width:680px; height:230px; overflow:hidden; position:relative;}
 2 .tz_newlist{ width:680px; height:230px; overflow:hidden; float:left;}
 3 .tz_newimg{ width:380px; height:228px; overflow:hidden; float:left; margin:10px 20px 0 0;}
 4 .tz_newimg img{ width:380px; height:228px; overflow:hidden;}
 5 .tz_newcontent{ width:270px; height:228px; overflow:hidden; float:left; margin:10px 0 0 0;}
 6 .tz_newtitle{ width:100%; height:84px; overflow:hidden; line-height:34px; border-bottom:1px dashed #d2d0d1; font-size:24px; color:#333;}
 7 .tz_newdes{ width:100%; height:68px; overflow:hidden; line-height:23px; color:#666; margin-top:16px;}
 8 .tz_newpage{ width:100px; height:17px; overflow:hidden; position:absolute; bottom:10px; right:100px;}
 9 .tz_newpre{ width:17px; height:17px; overflow:hidden; float:left; background:url(../images/tz_bj04.png) no-repeat;}
10 .tz_newpre:hover{ background:url(../images/tz_bj04.png) no-repeat -34px 0;}
11 .tz_newpg{ width:56px; height:7px; overflow:hidden; margin:5px 0 0 10px; float:left;}
12 .tz_newpg a{ width:7px; height:7px; overflow:hidden; display:block; float:left; margin-right:5px; background:url(../images/tz_bj03.png) no-repeat;}
13 .tz_newpg a:hover{ background:url(../images/tz_bj03.png) no-repeat -7px 0;}
14 .tz_newpg a.current{ background:url(../images/tz_bj03.png) no-repeat -7px 0;}
15 .tz_newnext{ width:17px; height:17px; overflow:hidden; float:right; background:url(../images/tz_bj04.png) no-repeat -17px 0;}
16 .tz_newnext:hover{ background:url(../images/tz_bj04.png) no-repeat -51px 0;}

  1 function initFeatureSlide(strId) {
  2     var domRoot = document.getElementById(‘feature-slide-block‘);
  3     if (!domRoot) return;
  4     domRoot.list = [];
  5     var children = domRoot.childNodes;
  6     var offset = 0;
  7     for (var i in children) {
  8         var domItem = children[i];
  9         if (domItem && domItem.className == ‘tz_newlist‘) {
 10             domRoot.list.push(domItem);
 11             domItem.offset = offset;
 12             offset++;
 13         }
 14     }
 15     var domList = document.getElementById(‘feature-slide-list-items‘);
 16     if (!domList) return;
 17     domList.innerHTML = ‘‘;
 18     domList.items = [];
 19     for (var i = 0; i < domRoot.list.length; i++) {
 20         var temp = domRoot.list[i];
 21         var domItem = document.createElement(‘a‘);
 22         domList.appendChild(domItem);
 23         domItem.href = ‘#‘;
 24         domItem.onclick = function(){
 25             return false;
 26         }
 27         domList.items.push(domItem);
 28         domItem.offset = i;
 29     }
 30     var domPreviousBtn = document.getElementById(‘feature-slide-list-previous‘);
 31     var domNextBtn = document.getElementById(‘feature-slide-list-next‘);
 32     domPreviousBtn.onclick = function(evt) {
 33         evt = evt || window.event;
 34         var target = evt.target || evt.srcElement;
 35         var offset = domList.current.offset;
 36         offset--;
 37         if (offset >= domList.items.length || offset < 0)
 38             offset = domList.items.length - 1;
 39         target.blur();
 40         doSlide(offset);
 41         return false;
 42     }
 43     domNextBtn.onclick = function(evt) {
 44         evt = evt || window.event;
 45         var target = evt.target || evt.srcElement;
 46         var offset = domList.current.offset;
 47         offset++;
 48         if (offset >= domList.items.length || offset < 0)
 49             offset = 0;
 50         target.blur();
 51         doSlide(offset);
 52         return false;
 53     }
 54     domRoot.current = domRoot.list[0];
 55     domList.current = domList.items[0];
 56     domRoot.current.style.display = ‘block‘;
 57     domList.current.className = ‘current‘;
 58     function doSlide(offset, timeStamp) {
 59         if (
 60             timeStamp &&
 61             (
 62                 domRoot.boolHover ||
 63                 timeStamp != domRoot.timeStamp
 64                 )
 65                 ) return;
 66 
 67         if (typeof(offset) != ‘number‘) {
 68             offset = domList.current.offset - (-1);
 69             if (offset >= domList.items.length || offset < 0)
 70                 offset = 0;
 71         }
 72         domRoot.current.style.display = ‘none‘;
 73         domList.current.className = ‘‘;
 74         domRoot.current = domRoot.list[offset];
 75         domList.current = domList.items[offset];
 76         domRoot.current.style.display = ‘block‘;
 77         domList.current.className = ‘current‘;
 78         if (domRoot.boolHover) return;
 79         var now = new Date();
 80         domRoot.timeStamp = now.valueOf();
 81         window.setTimeout(function() {
 82             doSlide(null, now.valueOf());
 83         }, 5000);
 84     }
 85     domList.onmouseover = domList.onclick = function (evt) {
 86         evt = evt || window.event;
 87         var target = evt.target || evt.srcElement;
 88         while (target && target != domList) {
 89             if (target.tagName.toLowerCase() == ‘a‘) {
 90                 target.blur();
 91                 doSlide(target.offset);
 92                 return false;
 93             }
 94             target = target.parentNode;
 95         }
 96     }
 97     domRoot.onmouseover = domRoot.onmousemove = function() {
 98         domRoot.boolHover = true;
 99     }
100     domRoot.onmouseout = function(evt) {
101         domRoot.boolHover = false;
102         var now = new Date();
103         domRoot.timeStamp = now.valueOf();
104         window.setTimeout(function() {
105             doSlide(null, now.valueOf());
106         }, 5000);
107     }
108     var now = new Date();
109     domRoot.timeStamp = now.valueOf();
110     window.setTimeout(function() {
111         doSlide(null, now.valueOf());
112     }, 5000);
113 }