3种方法实现列表自动滚动

3种⽅法实现列表⾃动滚动

⾃动滚动这种效果在⽹页中还是⽐较常见的。现在，就我在做项⽬期间所⽤到的能够实现⾃动滚动的⽅法做⼀个总结。

⽅法⼀：⽤javascript原⽣代码实现，不需要依赖任何框架，代码及注释如下：

1 //javascript原⽣⾃动滚动

2function startmarquee(lh,speed,delay,marqueeObj) { //lh---每⾏列表的⾼度，speed---滚动的速度，delay---间隔多久滚动⼀次,marqueeObj---需要实现这个效果的id 3var p=false;

4var t;

5var ElementById(marqueeObj);

6 o.innerHTML+=o.innerHTML;

7 o.style.marginTop=0;

8 o.onmouseover=function(){p=true;} //⿏标移⼊，停⽌滚动

9 o.onmouseout=function(){p=false;}//⿏标移出，继续滚动

空气清净机11function start(){

嵌入式终端

12 t=setInterval(scrolling,speed); //定时器，⾃动滚动

13if(!p) o.style.marginTop=parseInt(o.style.marginTop)-1+"px";

14 }

16function scrolling(){

多向指示牌17if(parseInt(o.style.marginTop)%lh!=0){

18 o.style.marginTop=parseInt(o.style.marginTop)-1+"px";

19if(Math.abs(parseInt(o.style.marginTop))>=o.scrollHeight/2) o.style.marginTop=0;

20 }else{

21 clearInterval(t);

22 setTimeout(start,delay);

23 }

24 }

应崇江

25 setTimeout(start,delay);

26 }

27 startmarquee(48,20,1000,"marqueebox"); //引⽤函数

⽅法⼆：依赖jquery，可以进⾏不定⾼的滚动

1 　//列表⾃动滚动帐篷门

2function scrollNews() {

3var $news = $('#marqueebox table');

4var $lineHeight = $news.find('tr:first').height();

5 $news.animate({ 'marginTop': -$lineHeight + 'px' }, 1000, function () {

6 $news.css({ margin: 0 }).find('tr:first').appendTo($news);

7 });

8 }

10var scrollTimer = null;

11var delay = 2000;

12 scrollTimer = setInterval(function () {

实验室制硝酸13 scrollNews();

14 }, delay);

⽅法三：从左往右轮播

1 function ScrollImgLeft(start,end,wrap){

2var speed=40;

3var scroll_begin = ElementById(start);

4var scroll_end = ElementById(end);

5var scroll_div = ElementById(wrap);

6 scroll_end.innerHTML=scroll_begin.innerHTML;

7function Marquee(){

8if(scroll_end.offsetWidth-scroll_div.scrollLeft<=0){

9 scroll_div.scrollLeft-=scroll_begin.offsetWidth;

10 }else{

11 scroll_div.scrollLeft++;

12 }

13 }

14var MyMar=setInterval(Marquee,speed);

15 useover=function() {clearInterval(MyMar);}

16 useout=function() {MyMar=setInterval(Marquee,speed);}

17 }

基本上上⾯三种的新闻轮播⽅法在项⽬中已经够⽤了，希望能够对⼤家有所帮助~如有不懂，欢迎留⾔~~

本文发布于:2024-09-21 14:53:14，感谢您对本站的认可！

本文链接：https://www.17tex.com/tex/3/287077.html

上一篇：鼠标右键坏了怎么修

下一篇：电脑鼠标乱动怎么回事

标签：滚动实现轮播需要

留言与评论（共有 0 条评论）