图片的无缝滚动意味着图片不断滚动，仿佛不是没有尽头。事实上，有几张图片一直在流传，但你看不到从后面切换到前面的效果。这是无缝滚动。文字和图片可以无缝滚动。这里有图片，文字也是一样的原理。

原则

以无缝向上滚动为例。其他方向无缝滚动的原理是一样的。单击可无缝向上滚动。

设置可见区域，并隐藏可见区域以外的部分。这里，nav部分作为可视区域，ul#img包含所有图片。实现无缝滚动的关键点在这里：

if(nav . scrollTop==list[list . length-1]。offsetTop){ nav . scroll top=0 } else { nav . scroll top；} nav.scrollTop这里指的是当前可视对象nav顶部到显示对象ul#img顶部的距离，也就是滚动条向下滚动的距离；List[i]是要显示的图片列表，list[list.length-1]是最后一张图片，list[list.length-1]。offsetTop是从最后一张图片的顶部到其父元素顶部的距离，它是恒定和固定的。父元素的位置不能是静态的(默认值)，也不能是div，否则将跳过该元素

当向下滚动的距离等于列表的距离时[list.length-1]。offsetTop，即图片5已经被越过，当显示图片1时，滚动距离瞬间为零。切换时，由于两张图片相同，人们在观看时无法注意到，所以形成了无缝滚动。

可以发现这里有一张图片重叠，因为最后一张图片滚动的时候会形成一个循环，视觉区域必须有一张图片，否则会是空白的。这里设置的可视区域是一张图片的高度，所以重复的是图片1。如果高于一张图片，需要依次重复图片列表中的几张图片。

Html部分

四个方向：上、下、左、右，无缝滚动的html部分是一样的，性能部分也是一样的，就是，

！doctype html lang=' en ' head meta charset=' utf-8 ' title无缝滚动/title link rel='样式表' href=' style . CSS '/head body nav ul id=' img ' liimg src=' http :/images/img 1 . jpg ' alt=' img 1 '/Li Li img src=' http :/images/img 2 . jpg ' alt=' img 2 '/Li Li img src=' http :/images/img 3 . jpg ' alt=' img 3 '/Li Li img src=' http :/images/img 4 . jpg ' alt=' img 4 '/Li Li img src=' http :/images/img 5 . jpg ' alt=' img 5 '/Li Li img src=' http :/images/img 1 . jpg ' alt=' img 1 '/Li/ul/nav script type=' text/JavaScript ' src=' http : script . js '/script/Body/html在这里，我们需要注意以下几点：设置了5张大小为720*405的图片进行循环滚动，但要实现无缝滚动，需要在后面反复添加几张图片。图片的具体数量应根据图片的高度(上下滚动)或宽度(左右滚动)的数倍的可视区域来确定。我在这里把可视区域的宽度设置为405px，所以只需要重复一张图片。如果假设为500px，

Css部分

这里以向上滚动为例，其他四个方向的样式相似，只是略有不同。在这里，我们需要注意以下几点：1。nav是可见区域，因此必须设置为宽度和高度，溢出应设置为隐藏，否则无法移动；2.ul#img的位置要设置，否则默认为static，这样会影响offsetTop属性，因为父元素的位置不能是static，否则会跳过元素，在更高的层次寻找；3.在ul#img中设置li元素，否则图片上下会有2px空白，影响滚动效果。

上下滚动样式

他们有相同的风格。ul#img的高度应该是所有图片的总高度。但是，由于li最初是从上到下排列的块级元素，因此无法设置ul#img的高度。但是，向左或向右移动时，ul#img的宽度必须设置为所有图片的总宽度。这里，为了一致性，高度被设置为所有图片的总高度。

* { padd : 0；margin : 0；} nav { width: 720px高度： 405 px；/*设置可见零件的高度*/余量： 40px自动；border: 5px固体# eee飞越：隐藏；} # img { width: 720px高度height:2430px/*设置可见部分的高度*/相对位置：/*默认为静态*/} # img Li { width : 720 px；height:405px/*如果没有设置，上下会有2px空白*/}上下左右滚动

他们有相同的风格。当向左和向右滚动时，使用float:left在一行中并排显示li个元素，但不要使用display: inline-block，因为以这种方式显示图片时会有间隙，并且因为行中元素之间的间隔，所以使用float。ul#img的宽度必须设置为图片的总宽度。

* { padd : 0；margin : 0；} nav { width: 720px高度： 405 px；/*设置可见零件的高度*/余量： 40px自动；border: 5px固体# eee飞越：隐藏；} # img { width: 4320pxheight:405px/*设置可见部分的高度*/相对位置：/*默认为静态*/} # img Li { width : 720 px；height:405pxfloat:left}JavaScript部分

这里，以向上滚动为例。JavaScript代码非常简单。要向下滚动，只需更改滚动顶部，并将滚动顶部更改为滚动顶部，将偏移顶部更改为偏移顶部。

var nav=document . getelementsbytagname(' nav ')[0]；var list=document . getelementbyid(' img ')。getElementsByTagName(' Li ')；函数scroll(){ if(nav . scrollTop==list[list . length-1]。offsetTop){ nav . scroll top=0；} else { nav.scrollTop} } var timer=setInterval(滚动，10)；nav . onmouseover=function(){ clearInterval(计时器)；};nav . onmouseout=function(){ timer=setInterval(滚动，10)；//定时器必须重新分配}点击无缝向下滚动，无缝向左滚动，无缝向右滚动

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。