HTML+CSS+JavaScript实现轮播图_html + javascript 轮播图

1页面布局

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

1 <div class="w">
2   <div class="main">
3       <div class="focus fl">                
4           <a href="javascript:;" class="arrow-l"> &lt; </a>           
5           <a href="javascript:;" class="arrow-r"> &gt;</a>                   
6           <ul>                    
7               <li><a href="#"><img src="upload/1.jpg" alt=""></a> </li>
8               <li><a href="#"><img src="upload/2.jpg" alt=""></a> </li>
9               <li><a href="#"><img src="upload/3.jpg" alt=""></a> </li>