() 我想实现滚动信息效果,自己写半天只达到这种效果,求修改!

  1. 有没有类似的demo供参考,每次只显示一条!

  2. 有什么方法可以让第三条显示完成后再继续滑动显示第一条么,而不是直接又到第一条!

css

 *,div,ul,li{ padding:0; margin:0; } .content{ position: relative; background-color: red; height:40px; width:300px; margin:0 auto; } ul{ height:40px; /*overflow: hidden;*/ position: absolute; top:0; } li{ height:40px; line-height: 40px; list-style: none; }

html

 <div class="content"> <ul class="list"> <li>test1</li> <li>test2</li> <li>test3</li> </ul> </div>

JS

 <script> let i=0; function goTop{ ++i; // console.logi; ifi==0{ $".list".css"top",0; } ifi<3{ $".list".animate{ top:-40*i },1000 } else{ i=-1; } } setIntervalgoTop,1000; </script>

**

这就是无限滚动,方法有很多

**
1、楼上提供的是复制li的方法,这种方法适合单向滚动,如果是个幻灯片要往前往后双向,复制的方式不是很方便,而且操作DOM影响性能。
2、我这里提供另一种posiotn定位的方式:
可直接查看https://jsfiddle.net/o5oqsodg/

或者复制代码到自己那查看

<body> <div class="content"> <ul class="list"> <li>test1</li> <li>test2</li> <li>test3</li> <li>test4</li> <li>test5</li> </ul> </div> <style type="text/css"> * { margin: 0; padding: 0; } .content { position: relative; top: 100px; left: 100px; height: 30px; width: 100px; overflow: hidden; text-align: center; border: 4px solid #f55; } .content li { position: relative; list-style-type: none; width: 100px; height: 30px; line-height: 30px; background-color: #eee; } </style> <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <script type="text/javascript"> var ul = $.list, li = ul.childrenli, liHeight = li.height, //取得单个li高度 len = li.length; //取得li总数,注意li的index是从0开始的,所以len也就相当于最后一个li的index+1 ul.heightlen * liHeight + px; //动态设置ul总高度 var index = 0; //索引 var timer; //定时器 $.content.on{ mouseenter: function { clearIntervaltimer; //鼠标悬停在信息上时停止滚动 }, mouseleave: function { timer = setIntervalplay, 1000; //鼠标移开继续滚动 } }.triggermouseleave; //默认的定时器初始启动 function play { //滚动动画函数 index++; if index === len { // 当滚动到最后一个li+1时 li.first.csstop, len * liHeight; //把第一个li拉下来放在最后 } ul.animate{ marginTop: -index * liHeight + px }, 500, function { //回调函数,每次滚动后执行 if index === len { //index为len时(即滚动到了最后被拉下来的li时) index = 0; //index复原 ul.cssmarginTop, 0; //ul复原 li.first.csstop, 0; //第一个li回到原位 }; }; } </script>
</body>

css:

 * { padding: 0; margin: 0; } .content { position: relative; background-color: red; height: 40px; width: 300px; margin: 0 auto; overflow: hidden;//遮罩层,你也可以注释掉,看是怎么运行的 } ul { position: absolute; top: 0; width: 100%; overflow: hidden;//清除浮动,不然ul会没有高度。不设置高度,由子盒子撑开高度,好处是方便拓展 } li { height: 40px; line-height: 40px; list-style: none; }

html:在ul后面加一条li

 <div class="content"> <ul class="list"> <li>test1</li> <li>test2</li> <li>test3</li> <li>test1</li> </ul> </div>

js:

var lih = $.content.height;
var i = 1;
setIntervalfunction { //当跳到最后一条时,让top瞬间变为0,对于人眼很难看的出来的,这样就实现了无限的滚动 if i >= 4 { i = 1 $.list.csstop,0; }; $.list.animate{top:-lih*i}; i++;
}, 2000

原理:

.content 中加入 overflow:hidden 试试

那这样啊,到第三条之后,复制前三条都第三条后边嘛,每次到第三条都复制一下,然后删掉前边的三条

发表评论

电子邮件地址不会被公开。 必填项已用*标注