版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Mazi1994/article/details/78148411
一、主体程序
|
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
|
<!DOCTYPE html>
<
html
>
<
head
>
<
meta
charset
=
"utf-8"
/>
<
title
>轮播图①（手动点击轮播）</
title
>
<
link
type
=
"text/css"
rel
=
"stylesheet"
href
=
"css/layout.css"
/>
</
head
>
<
body
>
<
div
class
=
"slideShow"
>
<!--图片布局开始-->
<
ul
>
<
li
><
a
href
=
"#"
><
img
src
=
"img/picture01.jpg"
/></
a
></
li
>
<
li
><
a
href
=
"#"
><
img
src
=
"img/picture02.jpg"
/></
a
></
li
>
<
li
><
a
href
=
"#"
><
img
src
=
"img/picture03.jpg"
/></
a
></
li
>
<
li
><
a
href
=
"#"
><
img
src
=
"img/picture04.jpg"
/></
a
></
li
>
</
ul
>
<!--图片布局结束-->
<!--按钮布局开始-->
<
div
class
=
"showNav"
>
<
span
class
=
"active"
>1</
span
>
<
span
>2</
span
>
<
span
>3</
span
>
<
span
>4</
span
>
</
div
>
<!--按钮布局结束-->
</
div
>
<
script
src
=
"js/jquery-1.11.3.js"
></
script
>
<
script
src
=
"js/layout.js"
></
script
>
</
body
>
</
html
>
|
额，上面的主体程序和前一篇没有区别，未做任何修改~~~~~感兴趣的可以查看第一篇文章，我本次随笔重点会在Jquery程序里面
二、CSS样式
|
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
|
*{
margin
:
0
;
padding
:
0
;
}
ul{
list-style
:
none
;
}
.slideShow{
width
:
346px
;
height
:
210px
;
/*其实就是图片的高度*/
border
:
1px
#eeeeee
solid
;
margin
:
100px
auto
;
position
:
relative
;
overflow
:
hidden
;
/*此处需要将溢出框架的图片部分隐藏*/
}
.slideShow ul{
width
:
2000px
;
position
:
relative
;
/*此处需注意relative : 对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置，如果没有这个属性，图片将不可左右移动*/
}
.slideShow ul li{
float
:
left
;
/*让四张图片左浮动，形成并排的横着布局，方便点击按钮时的左移动*/
width
:
346px
;
}
.slideShow .showNav{
/*用绝对定位给数字按钮进行布局*/
position
:
absolute
;
right
:
10px
;
bottom
:
5px
;
text-align
:
center
;
font-size
:
12px
;
line-height
:
20px
;
}
.slideShow .showNav span{
cursor
:
pointer
;
display
:
block
;
float
:
left
;
width
:
20px
;
height
:
20px
;
background
:
#ff5a28
;
margin-left
:
2px
;
color
:
#fff
;
}
.slideShow .showNav .active{
background
:
#b63e1a
;
}
|
三、jQuery程序
首先说一下定时自动轮播的原理：
1、首先得开一个定时器，假设定时器的时间设置为2000ms，也就是2S定时器执行一次操作
2、定时器每隔2S执行的操作就是模拟按次序点击数字按钮，也就是触发click事件，让图片左移
先来看大体效果实现的jQuery代码一：
|
1
2
3
4
5
6
|
var
timer=
null
;
//定时器返回值，主要用于关闭定时器
var
iNow=0;
//iNow为正在展示的图片索引值，当用户打开网页时首先显示第一张图，即索引值为0
timer=setInterval(
function
(){
//打开定时器
iNow++;
//让图片的索引值次序加1，这样就可以实现顺序轮播图片
showNumber.eq(iNow).trigger(
"click"
);
//模拟触发数字按钮的click事件
},2000);
//2000为轮播的时间
|
上面的程序可以实现每隔2S图片的轮播效果，但是轮播到最后一张图的时候会停止，因为没有判断iNow是否到达最后一张图，所以有了下面的代码二：
|
1
2
3
4
5
6
7
8
9
|
var
timer=
null
;
//定时器返回值，主要用于关闭定时器
var
iNow=0;
//iNow为正在展示的图片索引值，当用户打开网页时首先显示第一张图，即索引值为0
timer=setInterval(
function
(){
//打开定时器
iNow++;
//让图片的索引值次序加1，这样就可以实现顺序轮播图片
if
(iNow>showNumber.length-1){
//当到达最后一张图的时候，让iNow赋值为第一张图的索引值，轮播效果跳转到第一张图重新开始
iNow=0;
}
showNumber.eq(iNow).trigger(
"click"
);
//模拟触发数字按钮的click
},2000);
//2000为轮播的时间
|
所以jQuery程序的完整代码程序如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
$(document).ready(
function
(){
var
slideShow=$(
".slideShow"
),
//获取最外层框架的名称
ul=slideShow.find(
"ul"
),
showNumber=slideShow.find(
".showNav span"
),
//获取按钮
oneWidth=slideShow.find(
"ul li"
).eq(0).width();
//获取每个图片的宽度
var
timer=
null
;
//定时器返回值，主要用于关闭定时器
var
iNow=0;
//iNow为正在展示的图片索引值，当用户打开网页时首先显示第一张图，即索引值为0
showNumber.on(
"click"
,
function
(){
//为每个按钮绑定一个点击事件
$(
this
).addClass(
"active"
).siblings().removeClass(
"active"
);
//按钮点击时为这个按钮添加高亮状态，并且将其他按钮高亮状态去掉
var
index=$(
this
).index();
//获取哪个按钮被点击，也就是找到被点击按钮的索引值
ul.animate({
"left"
:-oneWidth*iNow,
//注意此处用到left属性，所以ul的样式里面需要设置position: relative; 让ul左移N个图片大小的宽度，N根据被点击的按钮索引值index确定
})
});
timer=setInterval(
function
(){
//打开定时器
iNow++;
//让图片的索引值次序加1，这样就可以实现顺序轮播图片
if
(iNow>showNumber.length-1){
//当到达最后一张图的时候，让iNow赋值为第一张图的索引值，轮播效果跳转到第一张图重新开始
iNow=0;
}
showNumber.eq(iNow).trigger(
"click"
);
//模拟触发数字按钮的click
},2000);
//2000为轮播的时间
})
|
上面的注释写的很详细了，主要是为了方便想学习的小伙伴看，但是实际上我写程序不会注释的那么详细，都是很简单的内容啦，看到这里你可能以为jQuery程序就完了，那就大错特错了，因为自动轮播效果是正确的，但是手动点击时就会出错，我特意做了一段Gif动画展示出错的效果：
看到上面的效果你就会忽然大悟，图片自动轮播时，你就算点击按钮它也只是附和你一下，跳转到你点击的按钮，但是仅仅持续一会还是按它轮播的次序，不理会你点击的按钮后应该走的轮播次序，至于原因嘛
是因为手动点击时index的值未赋值给定时器的图片索引iNow，这样iNow就无法存储你点击的按钮索引值，也就是不知道你点击的哪个按钮，既然知道了原因，那么下面就需要进行修改了。
修改完成后的jQuery程序最终版就是：
|
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
|
$(document).ready(
function
(){
var
slideShow=$(
".slideShow"
),
//获取最外层框架的名称
ul=slideShow.find(
"ul"
),
showNumber=slideShow.find(
".showNav span"
),
//获取按钮
oneWidth=slideShow.find(
"ul li"
).eq(0).width();
//获取每个图片的宽度
var
timer=
null
;
//定时器返回值，主要用于关闭定时器
var
iNow=0;
//iNow为正在展示的图片索引值，当用户打开网页时首先显示第一张图，即索引值为0
showNumber.on(
"click"
,
function
(){
//为每个按钮绑定一个点击事件
$(
this
).addClass(
"active"
).siblings().removeClass(
"active"
);
//按钮点击时为这个按钮添加高亮状态，并且将其他按钮高亮状态去掉
var
index=$(
this
).index();
//获取哪个按钮被点击，也就是找到被点击按钮的索引值
iNow=index;
ul.animate({
"left"
:-oneWidth*iNow,
//注意此处用到left属性，所以ul的样式里面需要设置position: relative; 让ul左移N个图片大小的宽度，N根据被点击的按钮索引值iNOWx确定
})
});
timer=setInterval(
function
(){
//打开定时器
iNow++;
//让图片的索引值次序加1，这样就可以实现顺序轮播图片
if
(iNow>showNumber.length-1){
//当到达最后一张图的时候，让iNow赋值为第一张图的索引值，轮播效果跳转到第一张图重新开始
iNow=0;
}
showNumber.eq(iNow).trigger(
"click"
);
//模拟触发数字按钮的click
},2000);
//2000为轮播的时间
})
|