div自动滑动,鼠标移上停止滑动

匿名 (未验证) 提交于 2019-12-02 23:43:01
这是在做个人站的时候展示项目成果,因为不光需要展示,还需要介绍详细内容,就在滚动展示的地方做了这个效果以便于点开想要看的项目。  首先,要做的是一个需要滚动的区域。我前边写过一个关于图片循环滚动的示例,那个是一块块的的滚动==>实现图片的循环滚动.  这次我们就做滚动区域是平滑循环滚动效果。  下边是布局的HTML代码,原理是在要展示区域的div(.ban_img)里加一个能包含所有需要展示的图的大div(.in_img),   <div class=" ban_img">         <div class="in_img">             <div class="inside inside1"></div>             <div class="inside inside2"></div>             <div class="inside inside3"></div>             <div class="inside inside4"></div>             <div class="inside inside5"></div>             <div class="inside inside6"></div>             <div class="inside inside1"></div>             <div class="inside inside2"></div>             <div class="inside inside3"></div>             <div class="inside inside4"></div>                                      </div></div>  下边是CSS样式,我加的是背景图,可跟实际情况选择(图片路径根据实际位置修改)   .ban_img{     height: 400px;     .in_img{         width: 3000px;         background-color: blue;         .inside{             width: 300px;             float: left;             height: 400px;             background-repeat: no-repeat;             background-size: cover;             box-sizing: border-box;             border: 3px solid #108A77;         }         .inside1{             background-image: url(../img/binzhilang.png);         }         .inside2{             background-image: url(../img/zhihui.png);         }         .inside3{             background-image: url(../img/jredu.png);         }         .inside4{             background-image: url(../img/sanyi.png);         }         .inside5{             background-image: url(../img/cimply.png);         }         .inside6{             background-image: url(../img/xingbake.png);         }     } }   实现循环滚动的JS很简单,为div(.in_img)加一个定时器就可以了,每10毫秒调整它的marginleft-1px,循环完一遍,计数器num清零    var scroll=document.getElementsByClassName("in_img");var num=0;var time=setInterval(function(){     num--;     scroll[0].style.marginLeft=num+"px";     if(num<=-1800){                 num=0;             } },10); 那么怎么实现标题所述效果呢?这也很简单,为div(.in_img)绑定两个事件来控制定时器就可以了。  首先添加鼠标移上去事件,来清除定时器  scroll[0].addEventListener("mouseover",function(){     clearInterval(time); }); 然后添加鼠标移走事件,再恢复定时器    scroll[0].addEventListener("mouseout",function(){     time=setInterval(function(){         num--;         scroll[0].style.marginLeft=num+"px";         if(num<=-1800){                     num=0;                 }     },10); }) 
文章来源: https://blog.csdn.net/qq_35606790/article/details/91978929
标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!