<!DOCTYPE html
>
<
html
>
<
head
>
<
meta
charset=
"UTF-8"
>
<
title
></
title
>
<
link
rel=
"stylesheet"
href=
"css/index.css"
>
<
link
rel=
"stylesheet"
href=
"css/reset.css"
>
</
head
>
<
body
>
<
div
class=
"box"
>
<
form
class=
"btn1"
>
<
input
type=
"button"
value=
"顺序播放"
id=
"order"
>
<
input
type=
"button"
value=
"循环播放"
id=
"loop"
>
</
form
>
<
p
id=
"btnDes"
>图片顺序播放
</
p
>
<
img
src=
"img/1a.jpg"
id=
"pic"
>
<
p
id=
"num"
>1/5
</
p
>
<
form
>
<
input
type=
"button"
value=
"上一张"
id=
"forward"
>
<
input
type=
"button"
value=
"下一张"
id=
"next"
>
</
form
>
<
p
id=
"p"
>这是第一张图片
</
p
>
</
div
>
<
script
>
var
next =
document.
getElementById(
"next");
var
forward =
document.
getElementById(
"forward");
var
pic =
document.
getElementById(
"pic");
var
num =
document.
getElementById(
"num");
var
p =
document.
getElementById(
"p");
var
asrc = [
"img/1a.jpg",
"img/2.jpg",
"img/3.jpg",
"img/4.jpg",
"img/5.jpg"];
var
ap = [
"这是第一张图片",
"这是第二张图片",
"这是第三张图片",
"这是第四张图片",
"这是第五张图片"];
var
aa =
0;
function
bb(){
pic.
src =
asrc[
aa];
p.
innerHTML =
ap[
aa];
num.
innerHTML =
aa+
1 +
"/" +
asrc.
length;
};
bb();
next.
onclick =
function(){
aa ++;
if(
aa>
asrc.
length-
1){
aa =
0;
};
bb();
};
forward.
onclick =
function(){
aa --;
if(
aa<
0){
aa =
asrc.
length-
1;
};
bb();
};
</
script
>
</
body
>
</
html
>
转载请注明原文地址: https://www.6miu.com/read-83193.html
