首页 > web前端 > js教程 > 使用Javascript简单实现图片无缝滚动_javascript技巧

使用Javascript简单实现图片无缝滚动_javascript技巧

WBOY
发布: 2016-05-16 16:29:00
原创
1635 人浏览过

js无缝滚动效果几乎在任何网页上都能看到它的身影,有的可能是使用插件,其实使用原始的javascript比较简单。

主要的是使用js位置知识。

1.innerHTML:设置或获取元素的html标签

2.scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距

3.offsetWidth:设置或获取指定标签的宽度

4.setInterval():设置方法定时启动

5.clearInterval();清除定时器

效果图:

先睹为快:demo

复制代码 代码如下:




   
    javascript scroll制作



   

       

图片滚动制作


       

   

     

       

         

               

  •            

  •            

  •            
  •      
             

         

             

       

     

     
          
   

   

<script><br /> var wrap=document.getElementById('wrap');<br /> var list1=document.getElementById('list1');<br /> var list2=document.getElementById('list2');<br /> var prev=document.getElementById('prev');<br /> var next=document.getElementById('next');<br /> //创建复制一份内容列表<br /> list2.innerHTML=list1.innerHTML;<br /> //向左循环滚动<br /> function scroll(){<br /> if(wrap.scrollLeft>=list2.offsetWidth){<br /> wrap.scrollLeft=0;<br /> }<br /> else{<br /> wrap.scrollLeft++;<br /> }<br /> }<br /> timer = setInterval(scroll,1);<br /> //鼠标停留使用clearInterval()<br /> wrap.onmouseover=function(){<br /> clearInterval(timer);<br /> }<br /> wrap.onmouseout=function(){<br /> timer = setInterval(scroll,1);<br /> }<br /> //向左加速<br /> function scroll_l(){<br /> if(wrap.scrollLeft>=list2.offsetWidth){<br /> wrap.scrollLeft=0;<br /> }<br /> else{<br /> wrap.scrollLeft++;<br /> }<br /> }<br /> //向右滚动<br /> function scroll_r(){<br /> if(wrap.scrollLeft<=0){<br /> wrap.scrollLeft+=list2.offsetWidth;<br /> }<br /> else{<br /> wrap.scrollLeft--;<br /> }<br /> } <br /> prev.onclick=function(){<br /> clearInterval(timer);<br /> change(0)<br /> }<br /> next.onclick=function(){<br /> clearInterval(timer);<br /> change(1)<br /> }<br /> function change(r){<br /> if(r==0){<br /> timer = setInterval(scroll_l,60);<br /> wrap.onmouseout = function(){<br /> timer = setInterval(scroll_l,60);<br /> }<br /> }<br /> if(r==1){<br /> timer = setInterval(scroll_r,60);<br /> wrap.onmouseout = function(){<br /> timer = setInterval(scroll_r,60);<br /> }<br /> } <br /> } <br /> </script> 

很简洁实用的代码,小伙伴们根据自己的项目需求,适当美化下即可。

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板