<!DOCTYPE html
>
<
html
lang=
"zh-CN"
>
<
head
>
<
meta
charset=
"UTF-8"
>
<
title
>动画-案例《轮播图》
</
title
>
<
style
>
* {
margin:
0;
padding:
0;
list-style:
none;
}
.slider {
height:
340px;
width:
790px;
margin:
100px
auto;
position:
relative;
}
.slider .image li {
position:
absolute;
display:
none;
}
.slider .image li:first-child {
display:
block;
}
.arrow {
display:
none;
}
.slider:hover .arrow {
display:
block;
}
.arrow-left,
.arrow-right {
font-family:
"SimSun",
"宋体";
width:
30px;
height:
60px;
background-color:
rgba(
0,
0,
0,
0.1);
position:
absolute;
top:
50%;
margin-top:
-30px;
cursor:
pointer;
text-align:
center;
line-height:
60px;
color:
#fff;
font-weight:
700;
font-size:
30px;
}
.arrow-left:hover,
.arrow-right:hover {
background-color:
rgba(
0,
0,
0,
.5);
}
.arrow-left {
left:
0;
}
.arrow-right {
right:
0;
}
.index {
position:
absolute;
/* border: 1px solid #000; */
width:
160px;
bottom:
10px;
left:
50%;
margin-left:
-50px;
}
.index li {
width:
15px;
height:
15px;
float:
left;
margin-right:
5px;
background-color:
white;
cursor:
pointer;
}
.index li.active {
background-color:
hotpink;
}
<
/
style
>
</
head
>
<
body
>
<
div
class=
"slider"
>
<!--图片容器 8图 -->
<
ul
class=
"image"
>
<
li
>
<
a
href=
"#"
>
<
img
src=
"images/1.jpg"
alt=
""
>
</
a
>
</
li
>
<
li
>
<
a
href=
"#"
>
<
img
src=
"images/2.jpg"
alt=
""
>
</
a
>
</
li
>
<
li
>
<
a
href=
"#"
>
<
img
src=
"images/3.jpg"
alt=
""
>
</
a
>
</
li
>
<
li
>
<
a
href=
"#"
>
<
img
src=
"images/4.jpg"
alt=
""
>
</
a
>
</
li
>
<
li
>
<
a
href=
"#"
>
<
img
src=
"images/5.jpg"
alt=
""
>
</
a
>
</
li
>
<
li
>
<
a
href=
"#"
>
<
img
src=
"images/6.jpg"
alt=
""
>
</
a
>
</
li
>
<
li
>
<
a
href=
"#"
>
<
img
src=
"images/7.jpg"
alt=
""
>
</
a
>
</
li
>
<
li
>
<
a
href=
"#"
>
<
img
src=
"images/8.jpg"
alt=
""
>
</
a
>
</
li
>
</
ul
>
<
ul
class=
"index"
>
<
li
class=
"active"
></
li
>
<
li
></
li
>
<
li
></
li
>
<
li
></
li
>
<
li
></
li
>
<
li
></
li
>
<
li
></
li
>
<
li
></
li
>
</
ul
>
<!--箭头-->
<
div
class=
"arrow"
>
<
span
class=
"arrow-left"
>
<
</
span
>
<
span
class=
"arrow-right"
>
>
</
span
>
</
div
>
</
div
>
<
script
src=
"./lib/jquery-1.12.4.min.js"
>
<
/
script
>
<
script
>
$(
function () {
var
idx =
0;
//右边按钮
$(
'.arrow>.arrow-right').
click(
function () {
idx++;
if (
idx ==
8) {
idx =
0;
}
$(
'.slider>ul.image>li').
eq(
idx).
fadeIn(
500).
siblings().
fadeOut(
500);
$(
'ul.index li').
eq(
idx).
addClass(
'active').
siblings().
removeClass(
'active');
});
//左边的按钮
$(
'.arrow>.arrow-left').
click(
function () {
idx--;
if (
idx <
0) {
idx =
7;
}
$(
'.slider>ul.image>li').
eq(
idx).
fadeIn(
500).
siblings().
fadeOut(
500);
$(
'ul.index li').
eq(
idx).
addClass(
'active').
siblings().
removeClass(
'active');
});
$(
'.index li').
mouseenter(
function () {
// 保存索引
idx =
$(
this).
index();
$(
this).
addClass(
'active').
siblings().
removeClass(
'active');
$(
'ul.image>li').
eq(
$(
this).
index()).
fadeIn().
siblings().
fadeOut();
})
});
<
/
script
>
</
body
>
</
html
>