学了一个半月JS，是骡子是马也该牵出来遛遛了

全村儿人希望

前段时间刚学完Python爬虫，都说学爬虫最好也学学JS语言。
学了一个半月了，正尝试比着别人的网站写个网页，碰到个跑马灯的特效，不会写钻研几个小时功夫不负有心人


其它的就不拿出来了，主要是给各位大佬看看图片跑马灯源码，加注释了
代码写的不好，大神勿喷

效果视频 https://pan.baidu.com/s/1GoMXW_rtlSejtRl__BYDwA


HTML源码

[JavaScript] 纯文本查看 复制代码

<div id="img_list">

            <!--存放所有组图容器-->
            <div id="img_div">

                <!-- ul1组图 -->
                <ul id="ul1">
                    <li><a href="#"><img src="img/Body/荣誉证书1.jpg" /></a></li>
                    <li><a href="#"><img src="img/Body/荣誉证书2.jpg" /></a></li>
                    <li><a href="#"><img src="img/Body/荣誉证书3.jpg" /></a></li>
                    <li><a href="#"><img src="img/Body/荣誉证书4.jpg" /></a></li>
                    <li><a href="#"><img src="img/Body/荣誉证书5.jpg" /></a></li>
                    <li><a href="#"><img src="img/Body/荣誉证书6.jpg" /></a></li>
                    <li><a href="#"><img src="img/Body/荣誉证书7.jpg" /></a></li>
                    <li><a href="#"><img src="img/Body/荣誉证书8.jpg" /></a></li>

                </ul>

                <!-- ul2组图 -->
                <ul id="ul2">
                    <li><a href="#"><img src="img/Body/荣誉证书9.jpg" /></a></li>
                    <li><a href="#"><img src="img/Body/荣誉证书10.jpg" /></a></li>
                    <li><a href="#"><img src="img/Body/荣誉证书11.jpg" /></a></li>
                    <li><a href="#"><img src="img/Body/荣誉证书12.jpg" /></a></li>
                    <li><a href="#"><img src="img/Body/荣誉证书13.jpg" /></a></li>
                    <li><a href="#"><img src="img/Body/荣誉证书14.jpg" /></a></li>
                    <li><a href="#"><img src="img/Body/荣誉证书15.jpg" /></a></li>
                </ul>

            </div>
        </div>

CSS代码

[JavaScript] 纯文本查看 复制代码

#img_list{
    width: 1210px;
    overflow: hidden;                /* 溢出部分隐藏 */
}

/*存放组图容器*/
#img_list > #img_div{
    width: 0;
    height: 140px;
    position: relative;               /* 开启相对定位 */
}

/*荣誉证书图片大小*/
#img_list img{
    width: 210px;
    height: 140px;

}

#img_list ul{
    position: absolute;              /* 开启绝对定位 */
}

#img_list ul li{
    float: left;                     /* 设置浮动，使其横向显示 */
    padding-right: 8px;              /* 设置每个列表项右外边距 */
}

#ul2{
    left: 0;                         /* 兼容IE */
}

JS代码

[JavaScript] 纯文本查看 复制代码

window.onload = function () {
    // 获取图片容器
    var img_div = document.getElementById("img_div");

    // 获取所有图片
    var imgArr = img_div.getElementsByTagName("img");

    // 获取图片存放ul
    var ul1 = document.getElementById("ul1");
    var ul2 = document.getElementById("ul2");

    // 获取ul1所有图片
    var imgArr1 = ul1.getElementsByTagName("img");
    // 获取ul2所有图片
    var imgArr2 = ul2.getElementsByTagName("img");

    // 修改ul容器宽度
    img_div.style.width = imgArr.length * 8 + imgArr.length * 210 + "px";

    // 修改ul1水平偏移量，使其在ul2组图后面
    ul1.style.left = imgArr2.length * 8 + imgArr2.length * 210 + "px";

    // 开启定时器
    setInterval(function () {

        // 获取当前ul1偏移量
        var oldValue1 = parseInt(getComputedStyle(ul1).left);

        // 获取当前ul2偏移量
        var oldValue2 = parseInt(getComputedStyle(ul2).left);

        // ul2偏移量递减，并修改其CSS属性
        var newValue2 = oldValue2 - 1;
        ul2.style.left = newValue2 + "px";

        // ul1偏移量递减，并修改其CSS属性
        var newValue1 = oldValue1 - 1;
        ul1.style.left = newValue1 + "px";

        // 判断偏移量是否为负值
        if (!parseInt(getComputedStyle(ul1).left)){

            // 修改ul2偏移量为ul1组图的长度，使跑完的ul2组图放到ul1后面
            ul2.style.left = imgArr1.length * 210 + imgArr1.length * 8 + "px";

        }if(!parseInt(getComputedStyle(ul2).left)){
            ul1.style.left = imgArr2.length * 210 + imgArr2.length * 8 + "px";
        }

    // 每60毫秒执行一次
    }, 60)
};

netCheney

思路很清晰，如果用对象封装起来就可以实现代码重用了，前提是不要使用那么多的ID选择器，css中ID的权重是10，这样会加重网页解析的负担。另外，用window.onload()不是很好，document.ready()相对会好一点，具体资料可以搜索一下。代码可以更精简一点：

[Asm] 纯文本查看 复制代码

// 分割所有的图片成数组
var imgArr1= imgArr[0,7];
var imgArr2=imgArr[8,14];

这个是已知数量的情况，如果封装成类，就需要在获取所有数量的时候加上一个计数的变量
var ImgNum = imgArr.length;
因为每次用document.getElement来获取元素都是要对网页进行遍历的，会对JS运行效率有影响。这些都是思路，楼主看来是刚开始学习js，不要把它学的太刻板了啊，一点愚见，还望海涵。

991375252

收藏了，学习学习

阳光天使之梦

不仅厉害，还优秀呀

qaz003

赞一个，以前用marquee 直接搞，不用JS。。

全村儿人希望

qaz003 发表于 2018-12-20 00:11
赞一个，以前用marquee 直接搞，不用JS。。

学会原理才是王道

全村儿人希望

阳光天使之梦 发表于 2018-12-20 00:10
不仅厉害，还优秀呀

想的都焦头烂额了

全村儿人希望

991375252 发表于 2018-12-20 00:09
收藏了，学习学习

努力共勉

chenql

厉害厉害

mzhsohu

为大神点赞，厉害了~

裸情似水

楼主，0基础怎么学JS？
看过几个视频坚持不下去，请分享下经验，谢谢了