jQuery淘宝服饰精品图片切换/自己实现




DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            font-size: 12px;
        }
        ul {
            list-style: none;
        }
        a {
            text-decoration: none;
        }

        .wrapper {
            width: 298px;
            height: 248px;
            margin: 100px auto 0;
            border: 1px solid pink;
            overflow: hidden;
        }
        #left,#center,#right{
            float: left;
        }
        #left li , #right li{
            background: url(images/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{
            background-image: url(images/abg.gif);
        }
        #center {
            border-left: 1px solid pink;
            border-right: 1px solid pink;
        }
    style>
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>
        <li><a href="#">毛衣a>li>
        <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="images/女靴.jpg" width="200" height="250"/>a>li>
        <li><a href="#"><img src="images/雪地靴.jpg" width="200" height="250"/>a>li>
        <li><a href="#"><img src="images/冬裙.jpg" width="200" height="250"/>a>li>
        <li><a href="#"><img src="images/呢大衣.jpg" width="200" height="250"/>a>li>
        <li><a href="#"><img src="images/毛衣.jpg" width="200" height="250"/>a>li>
        <li><a href="#"><img src="images/棉服.jpg" width="200" height="250"/>a>li>
        <li><a href="#"><img src="images/女裤.jpg" width="200" height="250"/>a>li>
        <li><a href="#"><img src="images/羽绒服.jpg" width="200" height="250"/>a>li>
        <li><a href="#"><img src="images/牛仔裤.jpg" width="200" height="250"/>a>li>
        <li><a href="#"><img src="images/女包.jpg" width="200" height="250"/>a>li>
        <li><a href="#"><img src="images/男包.jpg" width="200" height="250"/>a>li>
        <li><a href="#"><img src="images/登山鞋.jpg" width="200" height="250"/>a>li>
        <li><a href="#"><img src="images/皮带.jpg" width="200" height="250"/>a>li>
        <li><a href="#"><img src="images/围巾.jpg" width="200" height="250"/>a>li>
        <li><a href="#"><img src="images/皮衣.jpg" width="200" height="250"/>a>li>
        <li><a href="#"><img src="images/男毛衣.jpg" width="200" height="250"/>a>li>
        <li><a href="#"><img src="images/男棉服.jpg" width="200" height="250"/>a>li>
        <li><a href="#"><img src="images/男靴.jpg" width="200" height="250" />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>
        <li><a href="#">围巾a>li>
        <li><a href="#">皮衣a>li>
        <li><a href="#">男毛衣a>li>
        <li><a href="#">男棉服a>li>
        <li><a href="#">男靴a>li>
    ul>

    <script src="jquery-1.12.4.js">script>
    <script>
        $(function () {
            //需求1:给左边的li标签们设置鼠标移入事件,让中间索引对应的li显示,其他的li隐藏.
            //需求2:给右边的li标签们设置鼠标移入事件,让中间索引对应的li显示,其他的li隐藏.

            /**
             * 2侧, 分类, 分开处理
             * 索引
             */

            /**
             * 先处理左边
             * 一下子处理不掉, 就分解
             */
            $('.wrapper > #left > li').mouseenter(function () {
                let index1 = $(this).index();

                // 获取 center中的 li
                // console.log( $('.wrapper > #center > li')[index1] ); // output: 
                // output: 
 dom对象 不能使用show(), 需要转成 jquery对象
                $($('.wrapper > #center > li')[index1]).show().siblings('li').hide();

            });

            /**
             * 再处理右边的
             */
            $('.wrapper > #right > li').mouseenter(function () {
                let index2 = $(this).index() + 9;

                $($('.wrapper > #center > li')[index2]).show().siblings('li').hide();
            });

            //需求1:

            //需求2:

            //思考题:
            //为什么是给li标签设置鼠标移入事件,而不是给a标签设置鼠标移入事件?
            //因为给a标签设置的话,不能拿到正确的索引.

        });
    script>
div>
body>
html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
在这里插入图片描述
相关阅读:
比Linus更牛逼的程序员，QEMU、FFmpeg的作者
 需求收集方法工具，以及进行需求分析的6大要素
 OJ---Z 字形变换
 如何在3dMax中使用Python返回场景内所有对象的列表？
PTA：7-3 两个递增链表的差集
 4.基本IO口操作
 瞄准物业采购痛难点，SRM供应商采购管理系统助力企业打造全数字化供应网络
 hr的sql
什么是传递函数模型？
Docker快速入门
原文地址：https://blog.csdn.net/beyondx/article/details/126100263