js自动切换

display

思路:先将所有的图片设置为display:none,再设置一个值从0开始,将对应的图片设置display:block,当值大于图片个数时,将值重新设为0.

js自动切换这种方法比较容易理解,同时更容易编写,不需要计算偏移量,但是无法出现切换的过程(transition)

animation

js自动切换
这种方法只需要用到css中的animation属性,比较简洁,但是需要提前将图片拼起来,并且也要计算偏移量

js偏移

思路:将图片并排或并列排放,设置position属性,并计算好每次的偏移量,让它的偏移量到达一定数值后,重新归0。最后设置定时器,让它每隔一个时间间隔调用一次,实现切换

js自动切换

该方法可以使用transition属性来显示图片切换的过程

以上方法都只能让图片自动切换,无法手动切换