使用爪哇岛描述语言简单实现图片无缝滚动

射流研究…无缝滚动效果几乎在任何网页上都能看到它的身影，有的可能是使用插件，其实使用原始的爪哇岛描述语言比较简单。

主要的是使用射流研究…位置知识。

1.innerHTML:设置或获取元素的超文本标记语言标签

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

3 .偏移距离：设置或获取指定标签的宽度

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

5 .clear interval()；清除定时器

效果图：

先睹为快：演示

复制代码代码如下：DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title JavaScript卷轴制作/title/header dystyle/* con ment */* { margin : 0；padd : 0；} img {最大宽度： 100%；} .容器{最大宽度： 620像素；margin: 0自动填充-top : 50px；} .文本中心{ text-align :居中；} .列表-内联李{显示：内联块；} .隐藏{ display : none } HR { margin :20 px 0；} .标记{底色： # CCCpadd : 5px 0；} .标记Li { padd : 0 10pxborder-left : 1px实心# fffcursor:pointer指针指针；} .标签Li :第一个孩子{边框-左侧：透明；} .标记李。活动{背景色： # DDD；} .相对滚动{ position:padding: 10px边距-底部： 20px背景色： # DDD；} .隐藏包装{ overflow:}。内容{最小宽度： 3000 px高度： 200像素；} .内容ul{左侧浮动：} .内容ul Li { display :内嵌块；最大宽度： 200像素；} #prev，# next { width: 50px高度： 50px边距-top :-25px；背景色： # CCC线高： 50px文本对齐：中心；光标：指针；} # prev { position : absolute eleft : 0；前：50%；边框半径： 0 25px 25px 0} # next { position : absolute right : 0；前：50%；边框半径： 25px 0 0 25px}/style div class=' container ' h1 class=' text-center '图片滚动制作/h1 HR div class=' scroll ' div class=' wrap ' id=' wrap ' div id=' content ' class=' content ' ul id=' list 1 ' Li img src=' http : free。gif ' alt=' '/Li img src=' http :按钮。gif ' alt=' '/Li Li img src=' http :加载。gif ' alt=' '/Li img src=' http 3360s traw。gif ' altvar列表1=文档。getelementbyid(' list 1 ')；var列表2=文档。getelementbyid(' list 2 ')；var prev=文档。getelementbyid(' prev ')；var next=文档。getelementbyid(' next ')；//创建复制一份内容列表清单2。innerhtml=列表1。innerhtml//向左循环滚动函数scroll(){ if(换行。scrolleft=列表2。offsetwitth){ wrap。scrolleft=0；} else { wrap . scrolleft } } timer=setInterval(滚动，1);//鼠标停留使用clearInterval()。包起来。onmouseover=function(){ clearInterval(计时器)；}包装。onmouseout=function(){ timer=setInterval(滚动，1)；} //向左加速函数scroll _ l(){ if(换行。scrolleft=列表2。offsetwitth){ wrap。scrolleft=0；} else { wrap . scrolleft } }//向右滚动函数scroll _ r(){ if(wrap。scrolleft=0){ wrap。scrolleft=列表2。在两者之间；} else { wrap。scroll ft-；} } prev。onclick=function(){ clearInterval(计时器)；更改(0)}下一步。onclick=function(){ clearInterval(计时器)；change(1)} function change(r){ if(r==0){ timer=setInterval(scroll _ l，60)；包起来。onmouseout=function(){ timer=setInterval(scroll _ l，60)；} } if(r==1){ timer=setInterval(scroll _ r，60)；包起来。onmouseout=function(){ timer=setInterval(roll _ r，60)；} } }/脚本/正文

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