首页 > 代码库 > javascript写的新闻滚动代码

javascript写的新闻滚动代码

2024-07-04 17:20:57   233人阅读

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

1.body里面

 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.样式

 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

  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 = http://www.mamicode.com/‘#‘;
 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

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


联系
我们