javascript写的新闻滚动代码

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

1.body里面

 <div class="tz_tagcgnewcontent">

   <div id="feature-slide-block">

     <div class="tz_newlist">

       <div class="tz_newimg"><img src="data:images/tz_img03.jpg" /></div>

       <div class="tz_newcontent">

         <!--新闻标题只显示2行 截取字符串-->

         <div class="tz_newtitle">为什么说腾讯的兴趣社交必然失败1？</div>

         <!--新闻内容只显示3行 截取字符串-->

         <div class="tz_newdes">腾讯基于强联系的社交关系很难能成为兴趣社交的基石，或许这次尝试将会成为腾讯在社交领域继腾讯微博之后的又一次失败。</div>

       </div>

     </div>

     <div class="tz_newlist" style="display: none; ">

       <div class="tz_newimg"><img src="data:images/tz_img03.jpg" /></div>

       <div class="tz_newcontent">

         <!--新闻标题只显示2行 截取字符串-->

         <div class="tz_newtitle">为什么说腾讯的兴趣社交必然失败2？</div>

         <!--新闻内容只显示3行 截取字符串-->

         <div class="tz_newdes">腾讯基于强联系的社交关系很难能成为兴趣社交的基石，或许这次尝试将会成为腾讯在社交领域继腾讯微博之后的又一次失败。</div>

       </div>

     </div>

     <div class="tz_newlist" style="display: none; ">

       <div class="tz_newimg"><img src="data:images/tz_img03.jpg" /></div>

       <div class="tz_newcontent">

         <!--新闻标题只显示2行 截取字符串-->

         <div class="tz_newtitle">为什么说腾讯的兴趣社交必然失败3？</div>

         <!--新闻内容只显示3行 截取字符串-->

         <div class="tz_newdes">腾讯基于强联系的社交关系很难能成为兴趣社交的基石，或许这次尝试将会成为腾讯在社交领域继腾讯微博之后的又一次失败。</div>

       </div>

     </div>

     <div class="tz_newlist" style="display: none; ">

       <div class="tz_newimg"><img src="data:images/tz_img03.jpg" /></div>

       <div class="tz_newcontent">

         <!--新闻标题只显示2行 截取字符串-->

         <div class="tz_newtitle">为什么说腾讯的兴趣社交必然失败4？</div>

         <!--新闻内容只显示3行 截取字符串-->

         <div class="tz_newdes">腾讯基于强联系的社交关系很难能成为兴趣社交的基石，或许这次尝试将会成为腾讯在社交领域继腾讯微博之后的又一次失败。</div>

       </div>

     </div>

     <div id="feature-slide-list" class="tz_newpage"> <a href="#" id="feature-slide-list-previous" class="tz_newpre"></a>

       <div id="feature-slide-list-items" class="tz_newpg"> </div>

       <a href="#" id="feature-slide-list-next" class="tz_newnext"></a> </div>

   </div>

   <script type="text/javascript">

       initFeatureSlide();

   </script>

 </div>

2.样式

 .tz_tagcgnewcontent{ width:680px; height:230px; overflow:hidden; position:relative;}

 .tz_newlist{ width:680px; height:230px; overflow:hidden; float:left;}

 .tz_newimg{ width:380px; height:228px; overflow:hidden; float:left; margin:10px 20px 0 0;}

 .tz_newimg img{ width:380px; height:228px; overflow:hidden;}

 .tz_newcontent{ width:270px; height:228px; overflow:hidden; float:left; margin:10px 0 0 0;}

 .tz_newtitle{ width:100%; height:84px; overflow:hidden; line-height:34px; border-bottom:1px dashed #d2d0d1; font-size:24px; color:#333;}

 .tz_newdes{ width:100%; height:68px; overflow:hidden; line-height:23px; color:#666; margin-top:16px;}

 .tz_newpage{ width:100px; height:17px; overflow:hidden; position:absolute; bottom:10px; right:100px;}

 .tz_newpre{ width:17px; height:17px; overflow:hidden; float:left; background:url(../images/tz_bj04.png) no-repeat;}

 .tz_newpre:hover{ background:url(../images/tz_bj04.png) no-repeat -34px 0;}

 .tz_newpg{ width:56px; height:7px; overflow:hidden; margin:5px 0 0 10px; float:left;}

 .tz_newpg a{ width:7px; height:7px; overflow:hidden; display:block; float:left; margin-right:5px; background:url(../images/tz_bj03.png) no-repeat;}

 .tz_newpg a:hover{ background:url(../images/tz_bj03.png) no-repeat -7px 0;}

 .tz_newpg a.current{ background:url(../images/tz_bj03.png) no-repeat -7px 0;}

 .tz_newnext{ width:17px; height:17px; overflow:hidden; float:right; background:url(../images/tz_bj04.png) no-repeat -17px 0;}

 .tz_newnext:hover{ background:url(../images/tz_bj04.png) no-repeat -51px 0;}

3.javascript

 function initFeatureSlide(strId) {

     var domRoot = document.getElementById('feature-slide-block');

     if (!domRoot) return;

     domRoot.list = [];

     var children = domRoot.childNodes;

     var offset = 0;

     for (var i in children) {

         var domItem = children[i];

         if (domItem && domItem.className == 'tz_newlist') {

             domRoot.list.push(domItem);

             domItem.offset = offset;

             offset++;

         }

     }

     var domList = document.getElementById('feature-slide-list-items');

     if (!domList) return;

     domList.innerHTML = '';

     domList.items = [];

     for (var i = 0; i < domRoot.list.length; i++) {

         var temp = domRoot.list[i];

         var domItem = document.createElement('a');

         domList.appendChild(domItem);

         domItem.href = '#';

         domItem.onclick = function(){

             return false;

         }

         domList.items.push(domItem);

         domItem.offset = i;

     }

     var domPreviousBtn = document.getElementById('feature-slide-list-previous');

     var domNextBtn = document.getElementById('feature-slide-list-next');

     domPreviousBtn.onclick = function(evt) {

         evt = evt || window.event;

         var target = evt.target || evt.srcElement;

         var offset = domList.current.offset;

         offset--;

         if (offset >= domList.items.length || offset < 0)

             offset = domList.items.length - 1;

         target.blur();

         doSlide(offset);

         return false;

     }

     domNextBtn.onclick = function(evt) {

         evt = evt || window.event;

         var target = evt.target || evt.srcElement;

         var offset = domList.current.offset;

         offset++;

         if (offset >= domList.items.length || offset < 0)

             offset = 0;

         target.blur();

         doSlide(offset);

         return false;

     }

     domRoot.current = domRoot.list[0];

     domList.current = domList.items[0];

     domRoot.current.style.display = 'block';

     domList.current.className = 'current';

     function doSlide(offset, timeStamp) {

         if (

             timeStamp &&

             (

                 domRoot.boolHover ||

                 timeStamp != domRoot.timeStamp

                 )

                 ) return;

         if (typeof(offset) != 'number') {

             offset = domList.current.offset - (-1);

             if (offset >= domList.items.length || offset < 0)

                 offset = 0;

         }

         domRoot.current.style.display = 'none';

         domList.current.className = '';

         domRoot.current = domRoot.list[offset];

         domList.current = domList.items[offset];

         domRoot.current.style.display = 'block';

         domList.current.className = 'current';

         if (domRoot.boolHover) return;

         var now = new Date();

         domRoot.timeStamp = now.valueOf();

         window.setTimeout(function() {

             doSlide(null, now.valueOf());

         }, 5000);

     }

     domList.onmouseover = domList.onclick = function (evt) {

         evt = evt || window.event;

         var target = evt.target || evt.srcElement;

         while (target && target != domList) {

             if (target.tagName.toLowerCase() == 'a') {

                 target.blur();

                 doSlide(target.offset);

                 return false;

             }

             target = target.parentNode;

         }

     }

     domRoot.onmouseover = domRoot.onmousemove = function() {

         domRoot.boolHover = true;

     }

     domRoot.onmouseout = function(evt) {

         domRoot.boolHover = false;

         var now = new Date();

         domRoot.timeStamp = now.valueOf();

         window.setTimeout(function() {

             doSlide(null, now.valueOf());

         }, 5000);

     }

     var now = new Date();

     domRoot.timeStamp = now.valueOf();

     window.setTimeout(function() {

         doSlide(null, now.valueOf());

     }, 5000);

 }

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

巴特西

javascript写的新闻滚动代码

最新文章

热门文章