2020年在公司的老项目(原生JS)中有开发文字轮播的需求,网上找了很多方案,总有一些美中不足的细节问题。研究了半天时间,最终开发出一套个人满意的原生JS的文字轮播效果。
效果如下(简要概括就是:无限轮播,丝滑切换,效果杠杠):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>优化后的文字轮播</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<style type="text/css">
#rolling_noti{
width: 100%;
height: 45px;
background: #FCFE7B;
display: flex;
}
.box{
-webkit-flex: 1;
flex: 1;
}
#right_div{
display: inline-block;
background: url("source/close.jpeg") no-repeat right;
padding-right: 36px;
line-height: 36px;
}
.winBox{
font-family: PingFangSC-Regular;
font-size: 14px;
color: #FF721F;
letter-spacing: 0;
text-align: left;
height: 40px;
overflow: hidden;
position: relative;
}
/*解决安卓机型下最后一个li会换行的问题,ul设置不换行,li设置display:inline-block*/
#scroll_loudspeaker{
/*注意:width的真实值是由内部li的长度与数量决定的。*/
width: 900px;
position: absolute;
left: 0;
top: 0;
white-space: nowrap;
margin: 0;
}
#scroll_loudspeaker li{
list-style: none;
display: inline-block;
line-height: 40px;
text-align: left;
overflow: hidden;
text-decoration: none;
}
#rolling_noti span{
display: inline-block;
width: 25px;
height: 25px;
}
.content_li{
background-color: blue;
}
.li_div{
background: url("source/loudspeaker.jpeg") no-repeat left;
padding-left: 36px;
line-height: 36px;
}
</style>
</head>
<body>
<div id="rolling_noti">
<div id="rolling_div" style="-webkit-flex: 1;flex: 1;height: 100%;overflow: hidden;text-overflow: ellipsis;
-webkit-align-items: center;align-items: center;display: flex;white-space: nowrap">
<div class="box">
<div class="winBox">
<ul id="scroll_loudspeaker">
fklsjfald
</ul>
</div>
</div>
</div>
<div id="right_div" style=""></div>
</div>
<script type="text/javascript">
var ulAnimateLeft = 0;
function clearRollingNotiTimer(){
}
$("#scroll_loudspeaker").html("初始化中...");
var _this = this;
let noticeTips = ['张三 赢了1000元',"李四 赢了300元","王五 赢了870元"];
let noticeLength = noticeTips.length;
var lis = "";
for (var i = 0; i < noticeLength; i++) {
lis+= ( "<li class='content_li'>" +'<div class="li_div"><strong>'+noticeTips[i]+'</strong></div>' ) ;
}
// 无限循环轮播优化:在最后面添加一个li,呈现A-B-C-D-A的形式,D播放完成后到A
if (noticeLength > 0) {
lis+= ( "<li class='content_li'>" +'<div class="li_div"><strong>'+noticeTips[0]+'</strong></div>' ) ;
}
$('#scroll_loudspeaker').html(lis);
clearRollingNotiTimer();
let singleWidth = screen.width-50;
// ABCD内容长度
let infoUlLength = singleWidth * noticeLength;
// ABCDA内容长度
let ulLength = infoUlLength + singleWidth;
// 设置动态ul长度
$('#scroll_loudspeaker').css('width',ulLength+'px');
$('.content_li').css('width',singleWidth+'px');
console.warn("a,b",singleWidth,infoUlLength);
// 注意页面消亡时应销毁timer,进入页面时重新初始化
var timer = setInterval(function () {
// 播放到最后一个的时候,转为播放第一个
if(ulAnimateLeft== -infoUlLength){
ulAnimateLeft = 0;
}
ulAnimateLeft-=1;
console.info("ulAnimateLeft:",ulAnimateLeft);
$('#scroll_loudspeaker').css({
left:ulAnimateLeft
})
});
</script>
</body>
</html>