Linux额程序实现字幕滚动,js实现字幕无缝滚动

Document

.slide-box{

margin: 0 auto;

width:800px;

height:35px;

overflow:hidden;

}

.slide-box-inner{

width:3600px;

height:35px;

}

.slide-content,.slide-copy{

float:left;

height:35px;

}

.slide-content a,.slide-copy a{

display:block;

width:600px;

height:35px;

text-align:center;

line-height:35px;

color:#000;

text-decoration:none;

float:left

}

孕妇、心血管疾病患者、体内安装医院器械者或骨科类疾病患者等不适用按摩功能

孕妇、心血管疾病患者、体内安装医院器械者或骨科类疾病患者等不适用按摩功能

孕妇、心血管疾病患者、体内安装医院器械者或骨科类疾病患者等不适用按摩功能

//大层

var slideBox = document.getElementById("slideBox");

//内容层

var slideContent = document.getElementById("slideContent");

//拼接层

var slideCopy = document.getElementById("slideCopy");

//循环相隔时间

var speed = 20;

//复制内容

slideCopy.innerHTML = slideContent.innerHTML;

console.log(slideBox.scrollLeft);

// *无缝切换函数，滚动值>=可视宽度，归0，否则数值递增

function seamlessSlide() {

var seeWidth = slideContent.offsetWidth;

// console.log(slideBox.scrollLeft)

// console.log(seeWidth);

if (slideBox.scrollLeft >= seeWidth) {

slideBox.scrollLeft = 0;

} else {

slideBox.scrollLeft++;

}

}

//每10毫秒循环执行slide

var runslide = setInterval(seamlessSlide, speed);

//鼠标移到大层，循环终止

slideBox.onmouseover = function() {

clearInterval(runslide);

}

// //鼠标移开时，继续循环

slideBox.onmouseout = function() {

setTimeout(function() {

runslide = setInterval(seamlessSlide, speed);

}, 300);

}

结果：