HTML+CSS+JavaScript实现轮播图

VIP文章 weixin_43396749

已于 2022-11-25 12:07:26 修改

阅读量2.5k

点赞数 1

于 2022-11-24 14:33:42 首次发布

本文链接：https://blog.csdn.net/weixin_43396749/article/details/128017986

版权

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>