javascript - 我想实现滚动信息效果，自己写半天只达到这种效果，求修改！
本文介绍了javascript - 我想实现滚动信息效果，自己写半天只达到这种效果，求修改！的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
有没有类似的demo供参考,每次只显示一条！
有什么方法可以让第三条显示完成后再继续滑动显示第一条么，而不是直接又到第一条！
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.log(i);
if(i==0){
$(".list").css("top",0);
}
if(i<3){
$(".list").animate({
top:-40*i
},1000)
}
else{
i=-1;
}
}
setInterval(goTop,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.children('li'),
liHeight = li.height(), //取得单个li高度
len = li.length;
//取得li总数，注意li的index是从0开始的，所以len也就相当于最后一个li的index+1
ul.height(len * liHeight + 'px'); //动态设置ul总高度
var index = 0; //索引
var timer; //定时器
$('.content').on({
mouseenter: function() {
clearInterval(timer); //鼠标悬停在信息上时停止滚动
},
mouseleave: function() {
timer = setInterval(play, 1000); //鼠标移开继续滚动
}
}).trigger('mouseleave'); //默认的定时器初始启动
function play() { //滚动动画函数
index++;
if (index === len) { // 当滚动到最后一个li+1时
li.first().css('top', len * liHeight); //把第一个li拉下来放在最后
}
ul.animate({
'marginTop': -index * liHeight + 'px'
},
500,
function() { //回调函数，每次滚动后执行
if (index === len) { //index为len时（即滚动到了最后被拉下来的li时）
index = 0; //index复原
ul.css('marginTop', 0); //ul复原
li.first().css('top', 0); //第一个li回到原位
};
});
}
</script>
</body>这篇关于javascript - 我想实现滚动信息效果，自己写半天只达到这种效果，求修改！的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
