昨天利用原生js完成了轮播图，今天就试着用jquery做了个轮播图，方法都一样，但jquery实现却比js方便了许多
<!
DOCTYPE html
>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1.0"
>
<
meta
http-equiv
=
"X-UA-Compatible"
content
=
"ie=edge"
>
<
title
>
Document
</
title
>
<
script
src
=
"jquery.js"
>
<
/
script
>
<
style
>
*
{
margin
:
0px
;
padding
:
0px
;
list-style
:
none
;
}
#flash
{
width
:
400px
;
height
:
200px
;
position
:
relative
;
margin
:
0
auto
;
border
:
1px
solid
black
;
overflow
:
hidden
;
}
#falsh img
{
width
:
400px
;
height
:
200px
;
position
:
absolute
;
left
:
0
;
top
:
0
;
}
#flash ul
{
position
:
absolute
;
left
:
25%
;
bottom
:
5%
;
width
:
200px
;
height
:
30px
;
border-radius
:
20px
;
background-color
:
rgba
(
0
,
0
,
0
,
0.5
);
}
#flash ul li
{
float
:
left
;
width
:
15px
;
height
:
15px
;
border-radius
:
50%
;
background-color
:
#fff
;
margin-left
:
20px
;
margin-top
:
7px
;
}
#flash ul .li_first
{
background-color
:
#f40
;
}
#flash .button
{
width
:
50px
;
height
:
50px
;
border-radius
:
50%
;
background-color
:
rgba
(
0
,
0
,
0
,
0.3
);
cursor
:
pointer
;
}
#flash .right
{
position
:
absolute
;
right
:
10px
;
top
:
80px
;
}
#flash .left
{
position
:
absolute
;
left
:
10px
;
top
:
80px
;
}
#flash .button span
{
font-size
:
xx-large
;
font-weight
:
700
;
line-height
:
50px
;
margin-left
:
15px
;
color
:
rgba
(
255
,
255
,
255
,
0.5
);
}
<
/
style
>
</
head
>
<
body
>
<
div
id
=
"flash"
>
<
img
src
=
"img1.jpg"
alt
=
""
>
<
img
src
=
"img2.jpg"
alt
=
""
>
<
img
src
=
"img3.jpg"
alt
=
""
>
<
img
src
=
"img4.jpg"
alt
=
""
>
<
img
src
=
"img5.jpg"
alt
=
""
>
<
ul
>
<
li
class
=
"li_first"
></
li
>
<
li
></
li
>
<
li
></
li
>
<
li
></
li
>
<
li
></
li
>
</
ul
>
<
div
class
=
"button right"
><
span
>
>
</
span
></
div
>
<
div
class
=
"button left"
><
span
>
<
</
span
></
div
>
</
div
>
<
script
>
var
count
=
0
;
//定义全局变量count来表示当前图片
function
run
(){
count
++;
count
=
count
==
5
?
0
:
count
;
$
(
'#flash img'
).
eq
(
count
).
fadeIn
(
300
).
siblings
(
'img'
).
fadeOut
(
300
);
//利用eq来遍历img，并将count位图片显示，其他兄弟元素隐藏，fadeIN位淡入显示，fadeOut为淡出
$
(
'#flash ul li'
).
eq
(
count
).
css
(
'background'
,
'#f40'
).
siblings
(
'li'
).
css
(
'background'
,
'#fff'
);
//同样利用遍历改变圆点的背景色
}
function
reverserun
(){
count
--;
count
=
count
== -
1
?
4
:
count
;
$
(
'#flash img'
).
eq
(
count
).
fadeIn
(
300
).
siblings
(
'img'
).
fadeOut
(
300
);
$
(
'#flash ul li'
).
eq
(
count
).
css
(
'background'
,
'#f40'
).
siblings
(
'li'
).
css
(
'background'
,
'#fff'
);
}
var
timer
=
setInterval
(
run
,
1000
);
//设置定时器
$
(
'#flash'
).
hover
(
function
(){
//设置鼠标移入移出事件
clearInterval
(
timer
);
},
function
(){
timer
=
setInterval
(
run
,
1000
);
})
$
(
'#flash ul li'
).
mouseenter
(
function
(){
//设置移入圆点事件
count
=
$
(
this
).
index
();
count
=
count
==
5
?
0
:
count
;
$
(
'#flash img'
).
eq
(
count
).
fadeIn
(
300
).
siblings
(
'img'
).
fadeOut
(
300
);
$
(
'#flash ul li'
).
eq
(
count
).
css
(
'background'
,
'#f40'
).
siblings
(
'li'
).
css
(
'background'
,
'#fff'
);
})
$
(
'#flash .right'
).
click
(
function
(){
//设置右键按钮点击事件
run
();
})
$
(
'#flash .left'
).
click
(
function
(){
//设置左键按钮点击事件
reverserun
();
})
<
/
script
>
</
body
>
</
html
>
<!
DOCTYPE html
>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1.0"
>
<
meta
http-equiv
=
"X-UA-Compatible"
content
=
"ie=edge"
>
<
title
>
Document
</
title
>
<
script
src
=
"jquery.js"
>
<
/
script
>
<
style
>
*
{
margin
:
0px
;
padding
:
0px
;
list-style
:
none
;
}
#flash
{
width
:
400px
;
height
:
200px
;
position
:
relative
;
margin
:
0
auto
;
border
:
1px
solid
black
;
overflow
:
hidden
;
}
#falsh img
{
width
:
400px
;
height
:
200px
;
position
:
absolute
;
left
:
0
;
top
:
0
;
}
#flash ul
{
position
:
absolute
;
left
:
25%
;
bottom
:
5%
;
width
:
200px
;
height
:
30px
;
border-radius
:
20px
;
background-color
:
rgba
(
0
,
0
,
0
,
0.5
);
}
#flash ul li
{
float
:
left
;
width
:
15px
;
height
:
15px
;
border-radius
:
50%
;
background-color
:
#fff
;
margin-left
:
20px
;
margin-top
:
7px
;
}
#flash ul .li_first
{
background-color
:
#f40
;
}
#flash .button
{
width
:
50px
;
height
:
50px
;
border-radius
:
50%
;
background-color
:
rgba
(
0
,
0
,
0
,
0.3
);
cursor
:
pointer
;
}
#flash .right
{
position
:
absolute
;
right
:
10px
;
top
:
80px
;
}
#flash .left
{
position
:
absolute
;
left
:
10px
;
top
:
80px
;
}
#flash .button span
{
font-size
:
xx-large
;
font-weight
:
700
;
line-height
:
50px
;
margin-left
:
15px
;
color
:
rgba
(
255
,
255
,
255
,
0.5
);
}
<
/
style
>
</
head
>
<
body
>
<
div
id
=
"flash"
>
<
img
src
=
"img1.jpg"
alt
=
""
>
<
img
src
=
"img2.jpg"
alt
=
""
>
<
img
src
=
"img3.jpg"
alt
=
""
>
<
img
src
=
"img4.jpg"
alt
=
""
>
<
img
src
=
"img5.jpg"
alt
=
""
>
<
ul
>
<
li
class
=
"li_first"
></
li
>
<
li
></
li
>
<
li
></
li
>
<
li
></
li
>
<
li
></
li
>
</
ul
>
<
div
class
=
"button right"
><
span
>
>
</
span
></
div
>
<
div
class
=
"button left"
><
span
>
<
</
span
></
div
>
</
div
>
<
script
>
var
count
=
0
;
//定义全局变量count来表示当前图片
function
run
(){
count
++;
count
=
count
==
5
?
0
:
count
;
$
(
'#flash img'
).
eq
(
count
).
fadeIn
(
300
).
siblings
(
'img'
).
fadeOut
(
300
);
//利用eq来遍历img，并将count位图片显示，其他兄弟元素隐藏，fadeIN位淡入显示，fadeOut为淡出
$
(
'#flash ul li'
).
eq
(
count
).
css
(
'background'
,
'#f40'
).
siblings
(
'li'
).
css
(
'background'
,
'#fff'
);
//同样利用遍历改变圆点的背景色
}
function
reverserun
(){
count
--;
count
=
count
== -
1
?
4
:
count
;
$
(
'#flash img'
).
eq
(
count
).
fadeIn
(
300
).
siblings
(
'img'
).
fadeOut
(
300
);
$
(
'#flash ul li'
).
eq
(
count
).
css
(
'background'
,
'#f40'
).
siblings
(
'li'
).
css
(
'background'
,
'#fff'
);
}
var
timer
=
setInterval
(
run
,
1000
);
//设置定时器
$
(
'#flash'
).
hover
(
function
(){
//设置鼠标移入移出事件
clearInterval
(
timer
);
},
function
(){
timer
=
setInterval
(
run
,
1000
);
})
$
(
'#flash ul li'
).
mouseenter
(
function
(){
//设置移入圆点事件
count
=
$
(
this
).
index
();
count
=
count
==
5
?
0
:
count
;
$
(
'#flash img'
).
eq
(
count
).
fadeIn
(
300
).
siblings
(
'img'
).
fadeOut
(
300
);
$
(
'#flash ul li'
).
eq
(
count
).
css
(
'background'
,
'#f40'
).
siblings
(
'li'
).
css
(
'background'
,
'#fff'
);
})
$
(
'#flash .right'
).
click
(
function
(){
//设置右键按钮点击事件
run
();
})
$
(
'#flash .left'
).
click
(
function
(){
//设置左键按钮点击事件
reverserun
();
})
<
/
script
>
</
body
>
</
html
>
效果如下：
