一.实现这一效果最主要的几个要求点
-
轮播图的五张图片要求每隔3秒自动轮播一次
-
当鼠标移入时,轮播效果会停止,当鼠标移出时又会继续轮换播放
-
图片的两侧会有两个方向按钮,当点击按钮时图片会随之对应的方向切换
-
轮播图的下方会有五个白点,代表五张图片;当图片切换时对应的白点会随之亮起,当点击白点时也会切换到对应的图片
实现了这五个要求也就能实现淘宝首页轮播图的效果了。
好了下面直接上代码,里边会有一些注释:
1.首先是设置图片、箭头、小白点等元素
<div class="wrapper">
<div class="box">
<span class="left"><</span> <!--左右箭头-->
<span class="right">></span>
<ul class="img-list">
<li><img src="./imags/01.jpg" alt=""></li>
<li><img src="./imags/02.jpg" alt=""></li>
<li> <img src="./imags/03.jpg" alt=""></li>
<li><img src="./imags/04.jpg" alt=""></li>
<li><img src="./imags/05.jpg" alt=""></li>
<li><img src="./imags/01.jpg" alt=""></li>
</ul>
<div class="dot">
<ul class="dot-list">
<li class="item active" ></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
</ul>