<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style type="text/css">
.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
}
</style>
</head>
<body>
<div class="slide-box" id="slideBox">
<div class="slide-box-inner">
<div class="slide-content" id="slideContent">
<a href="#" class="box1" style="background-color: #9CD6D6">孕妇、心血管疾病患者、体内安装医院器械者或骨科类疾病患者等不适用按摩功能</a>
<a href="#" class="box2" style="background-color: #27E23D">孕妇、心血管疾病患者、体内安装医院器械者或骨科类疾病患者等不适用按摩功能</a>
<a href="#" class="box3" style="background-color: #2727E2">孕妇、心血管疾病患者、体内安装医院器械者或骨科类疾病患者等不适用按摩功能</a>
</div>
<!-- 双胞胎兄弟 -->
<div class="slide-copy" id="slideCopy">
</div>
</div>
</div>
<script type="text/javascript" language="javascript">
//大层
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);
}
</script>
</body>
</html>
结果: