我做了一个练习题，老师可以帮我看看吗，JS代码不太会写，谢谢老师。
自动滚动功能
如果滚动条到达最右边 重复回到最左边滚动
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>自动滚动</title>
<link rel="stylesheet" href="style5.css">
</head>
<body>
<div class="jd_container nice-goods" aria-label="发现好货">
<a href="#" class="nice-goods_logo nice-goods_logo-bg-1">
<div class="logo-container">
<div class="logo-text">
探索新生活
<i class="jiantou01"></i>
</div>
</div>
</a>
<div class="nice-goods_recommends" id="automatic">
<div class="goods-list" style="transform: translate3d(0px,0px,0px)">
<a href="#" class="goods goods--bottom">
<div class="goods_name">黑街多功能变形轮滑鞋</div>
<div class="goods_image">
<div class="lazyimg lazyimg_loaded">
<img src="img/5a72cf86Nc0bdfcb3.jpg!q70.jpg" alt="黑街多功能变形轮滑鞋" class="lazyimg_img">
</div>
</div>
</a>
<a href="#" class="goods goods--top">
<div class="goods_image">
<div class="lazyimg lazyimg_loaded">
<img src="img/05088cf4612dc99c.jpg" alt="MAC 圣诞限量 口红套装" class="lazyimg_img">
</div>
</div>
<div class="goods_name">MAC 圣诞限量 口红套装</div>
</a>
<a href="#" class="goods goods--bottom">
<div class="goods_name">环境猫 小巧便携 检测仪</div>
<div class="goods_image">
<div class="lazyimg lazyimg_loaded">
<img src="img/9ec8d31355c44409.png" alt="环境猫 小巧便携 检测仪" class="lazyimg_img">
</div>
</div>
</a>
<a href="#" class="goods goods--top">
<div class="goods_image">
<div class="lazyimg lazyimg_loaded">
<img src="img/5a716ad2N3afe0948.png" alt="金士顿高稳定性U盘" class="lazyimg_img">
</div>
</div>
<div class="goods_name">金士顿高稳定性U盘</div>
</a>
<a href="#" class="goods goods--bottom">
<div class="goods_name">小米智能机顶盒</div>
<div class="goods_image">
<div class="lazyimg lazyimg_loaded">
<img src="img/7834c3a9761f8385.jpg!q70.jpg" alt="小米智能机顶盒"class="lazyimg_img">
</div>
</div>
</a>
<a href="#" class="goods goods--top">
<div class="goods_image">
<div class="lazyimg lazyimg_loaded">
<img src="img/1e6cde18031528db.jpg" alt="公牛 智能 插座" class="lazyimg_img">
</div>
</div>
<div class="goods_name">公牛 智能 插座</div>
</a>
<a href="#" class="goods goods--bottom">
<div class="goods_name">IDX高帮火烈鸟板鞋</div>
<div class="goods_image">
<div class="lazyimg lazyimg_loaded">
<img src="img/5aaa1734Ndfebe256.jpg!q70.jpg" alt="IDX高帮火烈鸟板鞋" class="lazyimg_img">
</div>
</div>
</a>
<a href="#" class="goods goods--top">
<div class="goods_image">
<div class="lazyimg lazyimg_loaded">
<img src="img/1f9dcdbc6bd3a6d7.jpg" alt="史丹利 不锈钢 保温马克杯" class="lazyimg_img">
</div>
</div>
<div class="goods_name">史丹利 不锈钢 保温马克杯</div>
</a>
<a href="#" class="goods goods--bottom">
<div class="goods_name">3M呼气阀防雾霾口罩</div>
<div class="goods_image">
<div class="lazyimg lazyimg_loaded">
<img src="img/5a71b624N2cc652fb.jpg!q70.jpg" alt="3M呼气阀防雾霾口罩" class="lazyimg_img">
</div>
</div>
</a>
<a href="#" class="goods goods--top">
<div class="goods_image">
<div class="lazyimg lazyimg_loaded">
<img src="img/5a71cf79Ne9407815.jpg!q70.jpg" alt="Justice 板面" class="lazyimg_img">
</div>
</div>
<div class="goods_name">Justice 板面</div>
</a>
</div>
</div>
</div>
<!--<div id="div1">
<ul>
<li><img src="img/5a5082c8Nd0b374ac.jpg" alt=""></li>
<li><img src="img/5b5ae2f6N6b00abe4.jpg!q70.jpg" alt=""></li>
<li><img src="img/58fc8adfNdbc30fa2.jpg!q70.jpg" alt=""></li>
<li><img src="img/59b9d9b2Nbec847a8.jpg!q70.jpg" alt=""></li>
</ul>
</div>-->
<script src="script5.js"></script>
</body>
</html>
*{
margin: 0;
padding: 0;
}
/*#div1{
width: 712px;
height: 108px;
margin: 100px auto;
position: relative;
overflow: hidden;
}
#div1 ul{
position:absolute;
left: 0;
top: 0;
}z
#div1 ul li {
float: left;
width: 178px;
height: 108px;
list-style: none;
margin-left: 10px;
}*/
a{
color: #666;
text-decoration: none;
}
a:hover {
color: #c81623;
}
.jd_container{
width: 1190px;
margin-left: auto;
margin-right: auto;
}
.nice-goods{
height: 260px;
position: relative;
box-sizing: border-box;
padding-left: 190px;
margin-bottom: 20px;
}
.nice-goods_logo-bg-1{
background-image: url("img/disk.png");
}
.nice-goods_logo{
background-color: #eee;
background-size: 100% 100%;
position: absolute;
left: 0;
top: 0;
width: 190px;
height: 100%;
}
.nice-goods_logo .logo-container{
width: 160px;
height: 90px;
margin-top: 15px;
margin-left: auto;
margin-right: auto;
background-image: url("img/Find-good-goods.png");
background-size: contain;
background-position: 50%;
background-repeat: no-repeat;
}
.logo-text{
color: rgba(255,255,255,.8);
font-size: 16px;
padding-top: 55px;
padding-left: 20px;
padding-bottom: 10px;
display: block;
}
.logo-text i{
background-image: url("img/sprite.png");
background-position: 0 -16px;
width: 16px;
height: 16px;
position: relative;
margin-left: 2px;
margin-top: -3px;
vertical-align: middle;
display: inline-block;
}
.nice-goods_logo:hover .jiantou01 {
background: url(img/sprite.png);
background-position: 0 0;
transition: background-position 0.5ms ease-in-out;
}
.nice-goods_recommends{
background-color: white;
overflow: hidden;
}
.nice-goods_recommends{
margin-left: 10px;
height: 100%;
position: relative;
}
.nice-goods_recommends .goods-list{
padding-left: 20px;
padding-right: 20px;
height: 100%;
width: 100%;
box-sizing: border-box;
white-space: nowrap;
}
.nice-goods_recommends .goods-list .goods--bottom{
margin-top: 50px;
}
.nice-goods_recommends .goods-list .goods{
width: 150px;
display: inline-block;
margin-right: 50px;
vertical-align: top;
}
.goods--bottom .goods_name{
margin-bottom: 10px;
}
.nice-goods_recommends .goods-list .goods_name{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #333;
transition: color .2s ease;
text-align: center;
font-size: 14px;
}
.goods-list .goods_image{
transition: opacity .2s ease;
}
.nice-goods_recommends .goods-list .goods_image{
height: 150px;
}
.lazyimg_loaded{
transition: background .2s linear,opacity .2s linear!important;
background: transparent;
}
.lazyimg{
position: relative;
overflow: hidden;
}
.goods_image .lazyimg_img{
width: 100%;
height: 100%;
}
.lazyimg_loaded .lazyimg_img{
opacity: 1;
}
.nice-goods_recommends .goods-list .goods--top{
margin-top: 20px;
}
.nice-goods_recommends .goods-list .goods--top .goods_name{
margin-top: 10px;
}
var oDiv = document.getElementById('automatic');
var oUl = document.getElementsByTagName('a')[0];
var Li = oUl.getElementsByTagName('img');//获取ul下的所有li
oUl.innerHTML = oUl.innerHTML+oUl.innerHTML;//li下的内容进行想加
oUl.style.width = Li[0].offsetWidth*Li.length+'px';//ul的宽度等于每个li的宽度乘以所有li的长度
var speed = 2
//主方法
function move(){
//如果左边横向滚动了长度一半之后,回到初始位置
if(oUl.offsetLeft<-oUl.offsetWidth/speed){
oUl.style.left = '0'
}
//如果右边横向滚动的距离大于0 就让他的位置回到一半
if(oUl.offsetLeft>0){
oUl.style.left = -oUl.offsetWidth/speed+'px';
}
oUl.style.left = oUl.offsetLeft-2+'px';//进行左横向滚动
//oUl.style.left = oUl.offsetLeft+speed+'px';//进行右横向滚动
}
//调用方法
var timer = setInterval(move,30)
//鼠标指向的时候 暂停
oDiv.onmouseover=function(){
clearInterval(timer);
}
//鼠标离开之后 继续滚动
oDiv.onmouseout=function(){
timer = setInterval(move,30)
}
}
正在回答 回答被采纳积分+1
同学你好， 这个是使用插件来做的，插件的种类比较多，老师这边也不太熟悉京东的产品具体使用的什么插件。但是有一个类似的插件，非常好用，也是开发中常用的一款。如下是插件的官网，你可以稍微了解一下，在高级阶段的课程中会有讲解的。
https://www.swiper.com.cn/demo/index.html
另外，这种效果还是有一点难度的，同学刚入门还是没有能力去完成的。学习要循序渐进，目前最重要的是打好基础。建议同学先跟着课程学习，把课程中的案例多练习几遍，做好练习题与作业。等你以后技术提升了，再去尝试自己去写效果哦。
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星