1309

标签：rev   jpg   文字   get   属性   tag   element   onclick   nload   

<style type="text/css">

*{
margin: 0;
padding: 0;
}

#outer{
width: 500px;
margin: 50px auto;
padding: 10px;
background-color: greenyellow;
/*设置文本居中*/
text-align: center;
}
</style>

<script type="text/javascript">

window.onload = function(){

/*
* 点击按钮切换图片
*/

//获取两个按钮
var prev = document.getElementById("prev");
var next = document.getElementById("next");

/*
* 要切换图片就是要修改img标签的src属性
*/

//获取img标签
var img = document.getElementsByTagName("img")[0];

//创建一个数组，用来保存图片的路径
var imgArr = ["img/1.jpg" , "img/2.jpg" , "img/3.jpg" , "img/4.jpg" ,"img/5.jpg"];

//创建一个变量，来保存当前正在显示的图片的索引
var index = 0;

//获取id为info的p元素
var info = document.getElementById("info");
//设置提示文字
info.innerHTML = "一共 "+imgArr.length+" 张图片，当前第 "+(index+1)+" 张";


//分别为两个按钮绑定单击响应函数
prev.onclick = function(){

/*
* 切换到上一张，索引自减
*/
index--;

//判断index是否小于0
if(index < 0){
index = imgArr.length - 1;
}

img.src = imgArr[index];

//当点击按钮以后，重新设置信息
info.innerHTML = "一共 "+imgArr.length+" 张图片，当前第 "+(index+1)+" 张";
};

next.onclick = function(){

/*
* 切换到下一张是index自增
*/
index++;

if(index > imgArr.length - 1){
index = 0;
}

//切换图片就是修改img的src属性
//要修改一个元素的属性 元素.属性 = 属性值
img.src = imgArr[index];

//当点击按钮以后，重新设置信息
info.innerHTML = "一共 "+imgArr.length+" 张图片，当前第 "+(index+1)+" 张";

};


};

1309

标签：rev   jpg   文字   get   属性   tag   element   onclick   nload   

原文地址：https://www.cnblogs.com/xt888/p/12708252.html