(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>