学了一个半月JS，是骡子是马也该牵出来遛遛了
本帖最后由 全村儿人希望 于 2018-12-19 23:54 编辑前段时间刚学完Python爬虫，都说学爬虫最好也学学JS语言。
学了一个半月了，正尝试比着别人的网站写个网页，碰到个跑马灯的特效，不会写钻研几个小时功夫不负有心人
其它的就不拿出来了，主要是给各位大佬看看图片跑马灯源码，加注释了
代码写的不好，大神勿喷{:17_1072:}
效果视频 https://pan.baidu.com/s/1GoMXW_rtlSejtRl__BYDwA
HTML源码
<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代码
#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代码
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 于 2018-12-20 10:59 编辑
思路很清晰，如果用对象封装起来就可以实现代码重用了，前提是不要使用那么多的ID选择器，css中ID的权重是10，这样会加重网页解析的负担。另外，用window.onload()不是很好，document.ready()相对会好一点，具体资料可以搜索一下。代码可以更精简一点：
// 分割所有的图片成数组
var imgArr1= imgArr;
var imgArr2=imgArr;
这个是已知数量的情况，如果封装成类，就需要在获取所有数量的时候加上一个计数的变量
var ImgNum = imgArr.length;
因为每次用document.getElement来获取元素都是要对网页进行遍历的，会对JS运行效率有影响。这些都是思路，楼主看来是刚开始学习js，不要把它学的太刻板了啊，一点愚见，还望海涵。 收藏了，学习学习 不仅厉害，还优秀呀 赞一个，以前用marquee 直接搞，不用JS。。 qaz003 发表于 2018-12-20 00:11
赞一个，以前用marquee 直接搞，不用JS。。
学会原理才是王道 阳光天使之梦 发表于 2018-12-20 00:10
不仅厉害，还优秀呀
想的都焦头烂额了{:1_908:} 991375252 发表于 2018-12-20 00:09
收藏了，学习学习
努力共勉{:300_966:} 厉害厉害{:1_927:} 为大神点赞，厉害了~{:1_921:}{:1_919:} 楼主，0基础怎么学JS？
看过几个视频坚持不下去，请分享下经验，谢谢了