原生js向右无缝轮播

时间:2020-04-03 04:08:17
【文件属性】:

文件名称:原生js向右无缝轮播

文件大小:220KB

文件格式:RAR

更新时间:2020-04-03 04:08:17

js

实现思路(向右无缝滚动): 三张图片的尺寸为274X390; 初始位置定义包含整个图片列表的div的left值为-274px。 在图片列表的left 值在-274-0之间时,只需实现图片列表的向右滚动; 当图片列表的left值>=0时,需要将list中的最后一个元素添加到第一个元素之前,这样原本的第三个元素变成第一个元素,第一个元素、第二个元素的角标顺序加一。 最后将包含整个图片列表的div的left值重置为-274(如果不重置div的位置在0的位置时,会不停的换图片,不移动,出现闪屏) 图片样式中:鼠标没有移动到图片上时,图片为274X390 移动上去之后图片宽高均减去4,添加2的边框,同时动态改变透明度


【文件预览】:
20170309_imageCarousel_v1.3
----css()
--------common.css(753B)
----images()
--------moulinRouge.jpg(109KB)
--------wyattEarp.jpg(72KB)
--------kingKong.jpg(37KB)
----fanping.html(2KB)

网友评论