|
|
@@ -6,30 +6,62 @@ $(function () {
|
|
6
|
6
|
//获取元素
|
|
7
|
7
|
var divheight = $(".exam_one").height();
|
|
8
|
8
|
var container = $(".exam_container");
|
|
|
9
|
+ var exam_slide = $(".exam_slide"); //右侧图片
|
|
9
|
10
|
var list = $(".show_exam");
|
|
10
|
11
|
var buts = $(".exam_item");
|
|
11
|
12
|
var index = 0; //存放当前显示的图片的下标
|
|
|
13
|
+ var beforeidx = 0; //之前的索引
|
|
12
|
14
|
var interval = 5000; //位移时间间隔
|
|
13
|
15
|
var timer;
|
|
14
|
16
|
var blue = $(".blue");
|
|
15
|
17
|
var grey = $(".grey");
|
|
|
18
|
+ var that = $;
|
|
16
|
19
|
function animate(offset, type) {
|
|
17
|
20
|
var top = parseInt(list.css("top")) + offset;
|
|
18
|
21
|
// console.log(list.css("top"));
|
|
19
|
22
|
var absnum = Math.abs(offset);
|
|
20
|
|
- index++;
|
|
21
|
|
- offset = "-=" + Math.abs(offset);
|
|
22
|
|
- if (index == 5) {
|
|
23
|
|
- index = 0;
|
|
24
|
|
- offset = 0;
|
|
25
|
|
- }
|
|
|
23
|
+ $.each(exam_slide, (idx, item) => {
|
|
|
24
|
+ if (index != idx) {
|
|
|
25
|
+ //隐藏
|
|
|
26
|
+ exam_slide.eq(idx).css("visibility", "hidden");
|
|
|
27
|
+ } else {
|
|
|
28
|
+ //显示当前索引图片
|
|
|
29
|
+ exam_slide.eq(idx).css("visibility", "visible");
|
|
|
30
|
+ }
|
|
|
31
|
+ });
|
|
|
32
|
+
|
|
26
|
33
|
if (!type) {
|
|
|
34
|
+ beforeidx = index;
|
|
|
35
|
+ index++;
|
|
|
36
|
+ offset = "-=" + Math.abs(offset);
|
|
|
37
|
+ if (index == 5) {
|
|
|
38
|
+ index = 0;
|
|
|
39
|
+ offset = 0;
|
|
|
40
|
+ }
|
|
|
41
|
+
|
|
27
|
42
|
showButton();
|
|
28
|
43
|
}
|
|
29
|
|
- list.animate({ top: offset }, 300, function () {
|
|
30
|
|
- if (top > -200) {
|
|
|
44
|
+ if (index > beforeidx) {
|
|
|
45
|
+ console.log("从下往上滚");
|
|
|
46
|
+ } else {
|
|
|
47
|
+ console.log("从上往下滚");
|
|
|
48
|
+ }
|
|
|
49
|
+ console.log("当前索引", index, "上一个索引", beforeidx);
|
|
|
50
|
+
|
|
|
51
|
+ exam_slide.eq(beforeidx).animate(
|
|
|
52
|
+ {
|
|
|
53
|
+ visibility: "hidden",
|
|
|
54
|
+ transformOrigin: "top center",
|
|
|
55
|
+ transform: "scale(0)"
|
|
|
56
|
+ },
|
|
|
57
|
+ 500,
|
|
|
58
|
+ () => {
|
|
|
59
|
+ console.log("动画完成");
|
|
|
60
|
+ if (type) {
|
|
|
61
|
+ beforeidx = index;
|
|
|
62
|
+ }
|
|
31
|
63
|
}
|
|
32
|
|
- });
|
|
|
64
|
+ );
|
|
33
|
65
|
}
|
|
34
|
66
|
var imglist = [
|
|
35
|
67
|
{
|
|
|
@@ -131,26 +163,21 @@ $(function () {
|
|
131
|
163
|
buts.on({
|
|
132
|
164
|
mouseenter: function () {
|
|
133
|
165
|
//移入
|
|
|
166
|
+ var myIndex = parseInt($(this).attr("index"));
|
|
|
167
|
+ $.each(grey, function (idx, item) {
|
|
|
168
|
+ $(this).show();
|
|
|
169
|
+ });
|
|
134
|
170
|
$.each(blue, function (idx, item) {
|
|
135
|
|
- $(this).hide();
|
|
|
171
|
+ if (idx == myIndex) {
|
|
|
172
|
+ $(this).show();
|
|
|
173
|
+ } else {
|
|
|
174
|
+ $(this).hide();
|
|
|
175
|
+ }
|
|
136
|
176
|
});
|
|
137
|
|
- var myIndex = parseInt($(this).attr("index"));
|
|
138
|
|
- blue.eq(myIndex).show();
|
|
139
|
177
|
index = myIndex;
|
|
140
|
178
|
animate(divheight, 1);
|
|
141
|
|
- console.log("移入当前索引", myIndex);
|
|
142
|
179
|
},
|
|
143
|
|
- mouseleave: function () {
|
|
144
|
|
- //移出
|
|
145
|
|
- var myIndex = parseInt($(this).attr("index"));
|
|
146
|
|
- if (myIndex != 0 && myIndex != 4) {
|
|
147
|
|
- console.log(123);
|
|
148
|
|
- blue.eq(myIndex).hide();
|
|
149
|
|
- grey.eq(myIndex).show();
|
|
150
|
|
- }
|
|
151
|
|
-
|
|
152
|
|
- console.log("移出当前索引", myIndex);
|
|
153
|
|
- }
|
|
|
180
|
+ mouseleave: function () {}
|
|
154
|
181
|
});
|
|
155
|
182
|
// 回到顶部
|
|
156
|
183
|
$(".top").on("click", function () {
|
