求一个循环轮播的js效果原理

发布网友发布时间：2022-04-07 06:27

共2个回答

热心网友时间：2022-04-07 07:56

你好，这种效果我自己写过，我说下自己的方法

做一个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的话，代码量将大大减少

热心网友时间：2022-04-07 09:14

宽固定可以直接写100%吗？求源码