js实现字幕无缝滚动

<!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>
结果：
js实现字幕无缝滚动

猜你喜欢
