制作焦点图的两种方法

• 1、滑动效果
• 2、渐入效果

1、滑动效果

1. 焦点图中的图片需要有相同的宽和高
2. 设置divBox，宽高与图片相同
3. 设置ul，宽度为X00%（X为图片数量）
4. 设置li，并放上所有图片
5. 将li的样式设置为float: left;或float: right;
6. 将divBox的样式设置为overflow: hidden;，并给予相对定位
7. 将ul的样式设置为绝对对定位，并给予top: 0;和left: 0;
8. 利用JavaScript来改变ul的left值，进行滑动

2、渐入效果

1. 焦点图中的图片需要有相同的宽和高
2. 设置ul，宽高与图片相同
3. 设置li，并放上所有图片
4. 将ul的样式设置相对定位
5. 将li的样式设置为绝对定位，并给予top: 0;、left: 0;和z-index值
6. 利用JavaScript来改变li的z-index值，进行渐入