(Demo分享)利用原生JavaScript-ScrollLeft-实现做轮播广告通知
轮播广告通知整体思路：
1.首先文字的移动利用了JAVA script 中ScrollLeft的知识点；
2.在设置一条一模一样的新闻，利用无缝轮播图滚动的原理让新闻无缝滚动。
3.使用了自执行匿名函数，让网页载入后自动开始执行定时器，开始轮播广告通知。
实现效果：文字实现无缝跑马灯滚动轮播效果，鼠标划入停止滚动，鼠标移出继续滚动。
代码内有超级详细的注释，如有疑问，请留言，会在第一时间回复！
效果图：
全部代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
font-size:14px;
}
html{
width: 100%;
height: 100%;
/*给网页设置渐变背景色*/
/*在渐变色之前设置一个背景颜色为纯色，第二个设置渐变色会将第一个覆盖覆盖，此举是为了防止一些浏览器不兼容渐变色*/
background-color: #74ebd5;
background-image: linear-gradient(to right, #74ebd5 0%, #9face6 100%);
}
/*内容栏的设置*/
#box{
margin:200px auto 0;
padding:0 10px;
width:1000px;
height:140px;
line-height:140px;
border-radius: 15px;
/*border的dashed 指虚线*/
border:1px dashed green;
background:lightgreen;
}
#box #wrap{
height:140px;
overflow:hidden;
/*wrap元素里面的文字禁止换行*/
white-space:nowrap;
}
#box span{
color:red;
font-weight:bold;
font-size:50px;
}
/*让两条新闻在同一行，把第二条新闻变成行内块元素*/
#wrap div{
display:inline-block;
font-size: 34px;
}
</style>
</head>
<body>
<div id='box'>
<div id='wrap'>
<div id='conBegin'>
<span>最新消息：</span>6月3日上午，中国国防部长魏凤和发言：如果有人胆敢把台湾从中国分裂出去，中国军队别无选择，必将不惜一战，必将不惜一切代价，坚决维护祖国统一。
</div>
<!-- 在设置一条一模一样的新闻，利用无缝轮播图滚动的原理让新闻无缝滚动-->
<div id='conEnd'>
<span>最新消息：</span>6月3日上午，中国国防部长魏凤和发言：如果有人胆敢把台湾从中国分裂出去，中国军队别无选择，必将不惜一战，必将不惜一切代价，坚决维护祖国统一。
</div>
</div>
</div>
<script>
// 这里这个函数用到自执行匿名函数，前一个括号是一个匿名函数，后一个括号代表立即执行。
// 作用：可以用它创建命名空间，只要把自己的所有代码都写在这个特殊的函数包装内，那么外部就不能访问，防止代码
(function(){
var box = document.getElementById('box');
var conBegin = document.getElementById('conBegin');
var wrap = document.getElementById('wrap');
//利用封装好的获取css样式的函数，来获取conBegin的宽度
var conBegin_width = getCss(conBegin,'width');
var timer = window.setInterval(move,10);
function move(){
// 核心代码！！！
// scrollLeft：是该元素的显示（可见）的内容与该元素实际的内容的距离！！！
// scrollLeft属性可以返回或者设置元素内容向左滚动的尺寸。
// 也就是被元素左侧所遮挡的尺寸，或者说滚动条向右滚动的距离。
// 返回或者设置的值都是数字，不能带单位，默认单位是像素。
// 此属性相当有用，比如可以用来制作水平无缝滚动效果
// 简单了说：元素会从scrollLeft的位置显示该元素的内容。
// 这个属性只能用于元素设置了overflow的css样式中，一般和overflow:hideen配合使用
// scrollLeft相当于该元素的显示（可见）的内容与该元素实际的内容的距离,每执行一次定时就距离加1,就形成了文字滚动效果
wrap.scrollLeft ++;
// 如果是wrap元素的显示的内容与该元素实际的内容的距离。超过盒子的宽度，就让scrollLeft为0,从头开始
if(wrap.scrollLeft >= parseInt(conBegin_width)){
wrap.scrollLeft = 0
}
}
//鼠标划过停止定时器
box.onmouseover = function(){
window.clearInterval(timer);
}
// 鼠标离开启动定时器
box.onmouseout = function(){
timer = window.setInterval(move,10)
}
}())
// 封装的一个JS获取CSS样式的方法，第一个写需要获取的元素，第二个获取的属性，第三个参数需要更改的样式
function getCss(obj,attr,value){
var getStyle = obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj,false)[attr];
if(arguments.length === 2){
return getStyle;
}else if(arguments.length === 3){
obj.style[attr] = value;
}
}
</script>
</body>
</html>
