Remarks：
不知道为什么，渐变效果出不来。。等天亮了找大佬问问吧（已解决）元素中心放大原理：jQuery默认放大是向下向右扩大，这里对元素进行定位，然后通过jQuery在元素放大的同时，向左向上移动元素半径的距离，实现从中心点放大
如有更好的方法希望可以告知，谢谢！（同时希望路过的大佬帮忙简化一下代码，再次感谢）
性感骚男，在线笔芯.jpg
代码如下
html
<body>
<div class="box">
<div class="imgage">
<img src="img/1.jpg">
<img src="img/2.jpg">
<img src="img/3.jpg">
<img src="img/4.jpg">
<img src="img/5.jpg">
</div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="index.js"></script>
</body>
css
*{
margin: 0;
padding: 0;
}
.box{
width: 590px;
height: 470px;
margin: 50px auto;
}
.imgage{
width: 590px;
height: 470px;
position: absolute;
}
/* div */
div img{
display: none;
}
div img:first-child{
display: block;
}
/* ul */
ul{
/* width: 215px; */
height: 15px;
list-style: none;
position: relative;
left: 50%;
top: 440px;
margin-left: -107.5px;
}
ul li{
width: 15px;
height: 15px;
border-radius: 50%;
/* background: #ffffff; */
border: 2px solid red;
float: left;
margin-left: 30px;
color: #ffffff;
text-align: center;
line-height: 30px;
cursor: pointer;
position: relative;
}
ul li:first-child{
margin-left: 0px;
}
js
$(function(){
$('ul li').mouseover(function(){
let i = $(this).index();
// let a = $('div img').index();
// a=i;
$(this).stop().animate({
width : '30',
height : '30',
left : '-7',
top : '-7'
},function(){
$('ul li').eq(i).text(i+1)
})
// console.log($('div img'))
$('div img').eq(i).fadeIn(1000).siblings().hide();
})
$('ul li').mouseout(function(){
let i = $(this).index();
$(this).stop().animate({
width : '15',
height : '15',
left : '',
top : ''
},function(){
$('ul li').eq(i).text('')
})
})
})
代码很繁琐，后期会改进，也希望看到文章的大佬们指点一下
