<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>焦点式轮播图</title>
<script src="js/jquery-3.3.1.js"></script>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#lb{
width: 590px;
height: 470px;
margin: 30px auto;
border:1px solid #A9A9A9;
overflow: hidden;
position: relative;
}
ul,ol{
list-style:none;
}
#lb ul{
height: 100%;
width: 100%;
position: relative;
z-index: 1;
}
#lb>ul>li{
position: absolute;
top: 0;
right: 0;
}
#lb ol{
height: 25px;
position: absolute;
z-index: 2;
bottom: 10px;
right: 0px;
}
#lb>ol>li{
cursor: pointer;
}
ol>li{
float: left;
width: 20px;
height: 25px;
line-height: 25px;
margin-right: 10px;
text-align: center;
background-color: #bca891;
}
#lb ol .active{
border: 1px solid orange;
padding: 1px;
color: orange;
margin-top: -2px;
}
</style>
</head>
<body>
<div id="lb">
<ul>
<li style="z-index:1;"><a href="#"><img src="img/lb/1.jpg"></a></li>
<li><a href="#"><img src="img/lb/2.jpg"></a></li>
<li><a href="#"><img src="img/lb/3.jpg"></a></li>
<li><a href="#"><img src="img/lb/4.jpg"></a></li>
<li><a href="#"><img src="img/lb/5.jpg"></a></li>
</ul>
<ol>
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
</div>
</body>
<script type="text/javascript">
$(function () {
var index=0;
$("#lb>ol>li").mouseenter(function () {
//.prev().children($(this).index()).css("z-index",3)
// console.log($(this).parent())
//修改下标
$(this).addClass('active').siblings('li').removeClass('active');
//修改图标
index++;
$("#lb>ul>li").eq($(this).index()).css({'z-index':index,"left":590}).animate({"left":0},1000)
})
})
</script>
</html>
