HTML+CSS+JavaScript实现轮播图

HTML+CSS+JavaScript实现轮播图_第1张图片

1页面布局

轮播图图片移动的实现原理是:利用浮动将所有图片依次排成一行,给这一长串图片添加一个遮罩层,每次只显示一张图,其余的都隐藏起来。对图片的父级元素添加绝对定位,通过控制Ieft属性,实现照片的整体移动。HTML示例代码如下,CSS代码详见本书源码。

1 
2
3
4 < 5 > 6
    7
  • 8
  • 9
  • <

你可能感兴趣的:(javascript,html,css,前端)