在企业站中，我们会看到很多新闻列表很平滑的滚动，但是这种功能自己写太浪费时间，下面是我整理好的一组很常用的新闻列表滚动，有上下分页哦！
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>
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;}
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 = ‘#‘; 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 }
这段代码能用，但是可以优化的地方还有很多，大家可以提提意见