jQuery实现鼠标移入切换图片

DOCTYPE html>
html>
    head>
        meta charset="UTF-8">
        title>博客园（https://www.cnblogs.com）title>
        link rel="stylesheet" href="css/good2.0.css">
        script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">script>
        script>
            $(function() {
                $(‘#left>li,#right>li‘).mouseenter(function() {
                    var i = $(this).index(); //index() 方法返回指定元素相对于其他指定元素的 index 位置。
                    if($(this).parent().attr("id")=="right"){
                        i+=4;
                    }//当前元素的父元素id是为右边无序列表id的话索引值加4,parent() 方法返回被选元素的直接父元素,attr() 方法设置或返回被选元素的属性和值
                    $("#center>li:not()").hide().eq(i).show();  //因为所有的图片都加在了中间无序列表里里，所有需要先隐藏全部图片后显示需要的图片,:not(selector)去除所有与给定选择器匹配的元素，hide() 方法隐藏被选元素,:eq(index) 选取索引等于index 的元素，索引从0开始,show() 方法显示隐藏的被选元素。
                   });//#left>li选择器是获取左边的
标签，同理#right>li获取的是右边的
标签，mouseenter是鼠标移入被选元素触发的事件
           }); //因为HTML文档是由浏览器从上到下依次载入的，载入事件能避免JavaScript代码放在太后面而没效果
        script>
    head>
    body>
         div class="wrapper">
      ul id="left">
        li>a href="#">雪地靴a>li>
        li>a href="#">冬裙a>li>
        li>a href="#">呢大衣a>li>
        li>a href="#">牛仔裤a>li>
      ul>
      ul id="center">
        li>a href="#">img src="img/雪地靴.jpg"/>a>li>
        li>a href="#">img src="img/冬裙.jpg"/>a>li>
        li>a href="#">img src="img/呢大衣.jpg"/>a>li>
        li>a href="#">img src="img/牛仔裤.jpg"/>a>li>
        li>a href="#">img src="img/登山鞋.jpg"/>a>li>
        li>a href="#">img src="img/皮带.jpg"/>a>li>
        li>a href="#">img src="img/男毛衣.jpg"/>a>li>
        li>a href="#">img src="img/男棉服.jpg"/>a>li>
      ul>
      ul id="right">
        li>a href="#">登山鞋a>li>
        li>a href="#">皮带a>li>
        li>a href="#">男毛衣a>li>
        li>a href="#">男棉服a>li>
      ul>
    div>
    body>
html>

* {
    margin: 0;
    padding: 0;
    font-size: 12px;
}
ul {
    list-style: none;
}
a {
    text-decoration: none;
}
.wrapper {
    width: 218px;
    height: 108px;
    margin: 100px auto 0;
    border: 1px solid pink;
    overflow: hidden;
}
#left, #center, #right {
    float: left;
}
#left li, #right li {
    background: url(../img/lili.jpg) repeat-x;
}
#left li a, #right li a {
    display: block;
    width: 48px;
    height: 27px;
    border-bottom: 1px solid pink;
    line-height: 27px;
    text-align: center;
    color: black;
}
#left li a:hover, #right li a:hover {
    color: #fff;
    background-image: url(../img/abg.gif);
}
#center {
    border-left: 1px solid pink;
    border-right: 1px solid pink;
}
img {
    width: 120px;
    height: 108px;
}