轮播图我们很常见的功能,可以使用原生的js进行实现,也可以使用jQuery进行实现,还可以使用H5C3进行实现,当然也可以使用swiper插件很方便的实现,这里先用jQuery实现一个无缝的轮播。
思路:
1、首先获取要操作的对象
2、设置鼠标移入移出时显示和隐藏左右按钮
3、给左右按钮添加点击事件,让ul移动一个图片的宽度
4、给对应的小按钮设置点击事件,已经添加背景色
5、添加一个定时器让图片循环移动
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body,ul,ol,li,img {
margin: 0;
padding: 0;
list-style: none;
}
#box {
width: 700px;
height: 400px;
/*padding: 5px;*/
/*background-color: red;*/
border: 1px solid #ccc;
margin: 100px auto;
position: relative;
overflow: hidden;
}
.ad {
width: 700px;
height: 400px;
position: relative;
}
#box img {
width: 700px;
height: 400px;
}
.ad ul li{
width: 700px;
height: 400px;
overflow: hidden;
float: left;
}
.ad ul {
position: absolute;
left: 0;
top: 0;
wi