推荐于2017-10-06 · 知道合伙人软件行家
关注
展开全部
你好,这种效果我自己写过,我说下自己的方法
做一个div,宽高固定,overflow设为hidden
在该div中放一个ul,该ul种横向排布若干li,每个li装入一个图片,大小为外层div的宽和高
ul的宽度要设为所有li横向排布的总和,否则,图片会换行
然后,在js写一个定时器,setInterval,不停地修改ul的margin-left,宽度为一个图片宽
然后效果就是滑动的向左边切换一个图片
没切换完一张图片后,将ul的第一个li copy到ul的最后一位去,并删掉ul的第一个li,这时第一个li已经切换到外层div的左边,已经看不到了,所以我们做操作,用户不会发觉
然后修改ul的margin-left为0
这样就是无缝首尾切换了
做一个div,宽高固定,overflow设为hidden
在该div中放一个ul,该ul种横向排布若干li,每个li装入一个图片,大小为外层div的宽和高
ul的宽度要设为所有li横向排布的总和,否则,图片会换行
然后,在js写一个定时器,setInterval,不停地修改ul的margin-left,宽度为一个图片宽
然后效果就是滑动的向左边切换一个图片
没切换完一张图片后,将ul的第一个li copy到ul的最后一位去,并删掉ul的第一个li,这时第一个li已经切换到外层div的左边,已经看不到了,所以我们做操作,用户不会发觉
然后修改ul的margin-left为0
这样就是无缝首尾切换了
追问
能参考一下详细代码吗?
怎么复制最后一个li并且把他删掉
追答
现在才看到追问,这是我用原生js写的,如果用jquery的话,代码量将大大减少
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询