自己做了个练习题，怎么用JS实现自动滚动功能，没有任何思路麻烦老师帮忙看看，谢谢

自己做了个练习题，怎么用JS实现自动滚动功能，没有任何思路麻烦老师帮忙看看，谢谢

  1. 如果滚动条到达最右边 重复回到最左边滚动。。

  2. 滚动条左右可以滑动，找到对应的图片广告。。

<!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" id="con-ul" style="position: relative;left: 0;">
               <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 class="scroll-bar">
               <span class="scroll-points" id="out" style="transform: translate3d(787.987px,0px,0px);width: 99px;"></span>
           </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;
}
.nice-goods_recommends .scroll-bar{
   position: absolute;
   left: 15px;
   bottom: 10px;
   width: calc(100% - 30px);
   height: 3px;
   border-radius: 3px;
   background-color: #f3f3f3;
   opacity: 0;
   transition: opacity .3s ease;
   visibility: hidden;
}
.nice-goods_recommends .scroll-bar .scroll-points{
   width: 33px;
   height: 9px;
   border-radius: 4px;
   background-color: #d8d8d8;
   position: absolute;
   top: 50%;
   margin-top: -4.5px;
}
.nice-goods_recommends:hover .scroll-bar{
   opacity: 1;
   visibility: visible;
}

window.onload = init;
let conUl = document.getElementById('con-ul');
let timer = null;

function init() {
   timer = setInterval('common()', 20);
}
// 把定时器函数封装
function common() {
   let left = parseInt(conUl.style.left);
   conUl.style.left = (left - 1) + 'px';/**/
// 判断left距离是否到了ul宽度的三分之二，如果是就把left设置为零
   if (Math.abs(parseInt(conUl.style.left)) === parseInt(conUl.offsetWidth * 2 / 3)) {
       conUl.style.left = 0;
   }
}
// 鼠标移入清除定时器
conUl.onmousemove = function() {
   clearInterval(timer);
}
// 鼠标移除重新设置定时器/**/
conUl.onmouseout = function() {
   timer = setInterval('common()', 20);
}
aobj=document.getElementById('out');
document.οnmοusemοve=function(event){
   x=event.clientX-100;
   y=event.clientY-50;//监听鼠标位置;
   document.title=x+'-'+y;
   aobj.style.left=x+'px';
   aobj.style.top=y+'px';
}

http://img1.sycdn.imooc.com//climg/5e04712208a0d9d303000300.jpg

http://img1.sycdn.imooc.com//climg/5e01f3c208ed2a4f00000000.jpg

http://img1.sycdn.imooc.com//climg/5e01f3c2084de13603000300.jpg

http://img1.sycdn.imooc.com//climg/5e01f3c308417c3e03000300.jpg

http://img1.sycdn.imooc.com//climg/5e01f3c308fec86503000300.jpg

http://img1.sycdn.imooc.com//climg/5e01f3c309fb934900000000.jpg

http://img1.sycdn.imooc.com//climg/5e04712309dc6af903000300.jpg

http://img1.sycdn.imooc.com//climg/5e01f3c408c1f90903000300.jpg

http://img1.sycdn.imooc.com//climg/5e0471240887127303000300.jpg

http://img1.sycdn.imooc.com//climg/5e01f3c4085dad4300000000.jpg

http://img1.sycdn.imooc.com//climg/5e01f3c509d7051c00000000.jpg

http://img1.sycdn.imooc.com//climg/5e01f3c509ea826301600090.jpg

http://img1.sycdn.imooc.com//climg/5e04712409937cb300320032.jpg

http://img1.sycdn.imooc.com//climg/5e04715f0932b53211700339.jpg
慕妹8524794 2019-12-26
源自：项目：JS表单验证案例   3-3 中文名验证
47
收起

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论，去登陆吧

2回答
好帮手慕糖 2019-12-27 14:44:29

 同学你好，这个效果是会用到拖拽技术，目前是没有拖拽课程的。另外，这个效果一般是使用插件完成，不需要自己去写。
建议同学先学习课程内容，把课程中的案例多练习几遍，做好课程习题，打好基础才是最重要的。如果对拖拽效果感兴趣，可以等以后知识储备丰富了，再尝试去写。
祝学习愉快~ 


0
收起回答
  • 提问者 慕妹8524794 #1
    鼠标移动事件不能完成吗？
    2019-12-27 14:55:02
  • 好帮手慕糖 回复 提问者 慕妹8524794 #2
    同学你好，是的，只有鼠标移动事件是不能完成的。祝学习愉快~
    2019-12-27 19:05:31
bbbboom 2019-12-26 19:02:38

兄弟，我只能实现第一步，给你看看

http://img1.sycdn.imooc.com//climg/5e04926609bdbe5904830295.jpg

高度盖住了滚动条，你设小一点，还有宽度应该是小盒子的宽度啊。

function common() {
    let left = parseInt(conUl.style.left);
    conUl.style.left = (left - 1) + 'px'; /**/

    var res = (Math.abs(parseInt(conUl.style.left)) / (goodsList.offsetWidth - ngr.offsetWidth)) * (scrollBar.offsetWidth - scrollPoints.offsetWidth);
    scrollPoints.style.left = res + 'px';
    // 判断left距离是否到了ul宽度的三分之二，如果是就把left设置为零
    // if (Math.abs(parseInt(conUl.style.left)) === parseInt(conUl.offsetWidth * 2 / 3)) {
    if (Math.abs(parseInt(conUl.style.left)) === (goodsList.offsetWidth - ngr.offsetWidth)) {
        conUl.style.left = 0;
    }

}

我用的是比例，内容的left/显示内容的宽度(2000-990)*(线长-滚动条宽度)。还有下面判断条件我也改了，内容全部显示出来的条件是(2000-990) 。

你说的拖动滚动条这个效果，得需要H5拖拽，还是用插件吧，原生太麻烦了，要不就别考虑这个了。

0
收起回答
  • 提问者 慕妹8524794 #1
    1.滚动条我用的是hover伪元素，鼠标悬浮上去就会出现滚动条。我要最新的代码你要看看吗。 2.还有第二个问题是，图片不会自动滚动一次后，第二次不会从右边出来，会从左边从头开始。我没什么思路。。。
    2019-12-26 19:12:02
  • 提问者 慕妹8524794 #2
    现在还是不能重复自动滚动，就是图片滚动第一次完成后，第二次自动滚动会回重复
    2019-12-26 19:21:05
问题已解决，确定采纳
还有疑问，暂不采纳

恭喜解决一个难题，获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

自己做了一个练习题，麻烦老师帮我看一下JS代码，谢谢老师
37 0 4
我做了一个练习题，老师可以帮我看看吗，JS代码不太会写，谢谢老师。
48 0 7
老师，我这个动画不能从右侧进入，哪里需要改进一下。
11 0 6
老师，第一屏滚动没有效果是怎么回事？麻烦老师帮忙看一下是哪里打错了
39 0 11
我是用css的动画来实现左右切换图片的。但是按照这个思路后边有点没思路了，请教
48 3 11

登录后可查看更多问答，登录/注册

2.组件化网页开发
  • 参与学习           人
  • 提交作业       1121    份
  • 解答问题       14456    个

本阶段在运用JS实现动态网页开发的基础上，带你深入理解企业开发核心思想，完成一个企业级网页的开发，体验前端工程师的成就感。

了解课程

本课精华内容

问答 作业

老师！请教一段代码

37 3

prev+next选择器是否和父子选择器一样呢

22 4

2-11检查

78 1

老师，这样对吗

80 1

提问的同学看这里（慕课网出品）

56 1

查看更多本课问答
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师