gadget : jQuery中心放大元素及通过fadeIn()方法实现轮播

Remarks：

---

1. 不知道为什么，渐变效果出不来。。等天亮了找大佬问问吧（已解决）

2. 元素中心放大原理：jQuery默认放大是向下向右扩大，这里对元素进行定位，然后通过jQuery在元素放大的同时，向左向上移动元素半径的距离，实现从中心点放大

3. 如有更好的方法希望可以告知，谢谢！（同时希望路过的大佬帮忙简化一下代码，再次感谢）

性感骚男，在线笔芯.jpg

---

代码如下

html

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('')
        })
    })
})

代码很繁琐，后期会改进，也希望看到文章的大佬们指点一下