javascript写的新闻滚动代码

  在企业站中,我们会看到很多新闻列表很平滑的滚动,但是这种功能自己写太浪费时间,下面是我整理好的一组很常用的新闻列表滚动,有上下分页哦!

1.body里面

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>
View Code

2.样式

javascript写的新闻滚动代码
 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;}
View Code

3.javascript

javascript写的新闻滚动代码
  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 }
View Code

这段代码能用,但是可以优化的地方还有很多,大家可以提提意见

javascript写的新闻滚动代码

javascript写的新闻滚动代码,布布扣,bubuko.com

javascript写的新闻滚动代码

上一篇:【Javascript高级程序设计】数据类型与typeof


下一篇:编写高质量代码改善java程序的151个建议——导航开篇