先把html的页面搭建出来
html页面的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>
<!--搭建轮播框架开始-->
<div class="lb-kj">
<ul id="lb-img">
<li><img src="img/lb1.jpg" /></li>
<li><img src="img/lb2.jpg" /></li>
<li><img src="img/lb3.jpg" /></li>
<li><img src="img/lb4.jpg" /></li>
</ul>
</div>
<!--搭建轮播框架结束-->
<!--搭建圆点框架开始-->
<div class="lb-ydkj">
<ul class="lb-yd" id="lb-number">
<!--把li内的div画成圆点开始-->
<li>
<div class="lb-hy"></div>
</li>
<li>
<div class="lb-hy"></div>
</li>
<li>
<div class="lb-hy"></div>
</li>
<li>
<div class="lb-hy"></div>
</li>
<!--把li内的div画成圆点结束-->
</ul>
</div>
<!--搭建圆点框架结束-->
</div>
<link rel="stylesheet" href="css/lb.css" />
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript" src="js/lb.js"></script>
</body>
</html>
再给html的页面添加样式
css样式
/*把所有的li去掉圆点*/
ul li {
list-style: none;
}
/*轮播图的框架样式设置*/
.lb-kj {
width: 50%;
height: 244px;
margin: 0 auto;
}
/*轮播图的框架里的ul样式设置*/
.lb-kj ul {
width: 100%;
height: 244px;
margin-top: 0px;
overflow: hidden;
padding-left: 0px;
}
/*把轮播里的图片改成100%*/
.lb-kj img {
width: 100%;
}
/*让圆点的li排成一行*/
.lb-ydkj ul li {
display: inline-block;
}
/*圆点框架的样式设置*/
.lb-ydkj {
width: 50%;
margin: 0 auto;
margin-top: -5%;
position: relative;
}
/*画圆的样式设置*/
.lb-hy {
width: 10px;
height: 10px;
border-radius: 50%;
border: 1px solid #9D9D9D;
margin-right: 10px;
}
/*圆点的ul样式设置*/
.lb-yd {
width: 30%;
margin: 0 auto;
}
然后就是让轮播图和圆点动起来了
js页面
$(function() {
//轮播图
var index = 0;
showImg();
function showImg() {
//播放第index 图片
$("#lb-img li").hide();
$("#lb-img li").eq(index).show();
//小圆点样式
$("#lb-number li .lb-hy").css("background", ‘none‘)
$("#lb-number li .lb-hy").eq(index).css("background-color", "red");
}
var id;
//定时器轮播
var id = setInterval(function() {
if(index >= 3) {
index = 0;
} else {
index++;
}
showImg();
}, 2000)
//鼠标悬浮的时候
$("#lb-number li").hover(function() {
//停止定时器
clearInterval(id);
//换到第几个图片
index = $(this).index();
showImg();
}, function() {
//继续轮播
id = setInterval(function() {
if(index >= 3) {
index = 0;
} else {
index++;
}
showImg();
}, 2000)
})
});
效果图
