浅谈JavaScript_DOM学习篇_图片切换小案例
程序员文章站
2022-06-21 10:03:04
今天开始学习dom操作,下面写一个小案例来巩固下知识点.
dom: document object model (文档对象模型)
根据id获取页面元素 : 如: var...
今天开始学习dom操作,下面写一个小案例来巩固下知识点.
dom: document object model (文档对象模型)
根据id获取页面元素 : 如: var xx = document.getelementbyid("id");
根据标签获取元素: 如: var xx = document.getelementsbytagname("div");
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<style>
* {
margin: 0;
padding: 0;
}
#outer {
width: 500px;
/*设置上边距50px 水平居中*/
margin: 50px auto;
/*设置边框*/
padding: 10px;
background-color: greenyellow;
/*设置文本居中*/
text-align: center;
}
img {
width: 500px;
}
</style>
<script>
//btn 为按钮id clickeventfunction 为点击后执行的操作函数
function addclick(btn, clickeventfunction) {
var mybutton = document.getelementbyid(btn);
mybutton.onclick = clickeventfunction;
};
window.onload = function () {
(function () {
var pics = ["imgs/1.png",
"imgs/2.png",
"imgs/3.png"];
var index = 0;
showpicnum(index);
var img = document.getelementsbytagname("img")[0];
// var btn1 = document.getelementbyid("btn1");
var btn2 = document.getelementbyid("btn2");
addclick("btn1", function () {
index--;
if (index <= -1) {
index = pics.length - 1;
}
console.log(index + " ----- ");
img.src = pics[index];
showpicnum(index);
});
addclick("btn2", function () {
index++;
if (index >= pics.length) {
index = 0;
}
console.log(index + " ++++++++ ");
img.src = pics[index];
showpicnum(index);
});
//
// btn1.onclick = function () {
// index --;
// if(index <= -1){
// index = pics.length - 1;
// }
// console.log(index + " ----- ");
// img.src = pics[index];
// showpicnum(index);
// };
// btn2.onclick = function () {
// index ++;
// if(index >= pics.length){
// index = 0;
// }
// console.log(index + " ++++++++ ");
// img.src = pics[index];
// showpicnum(index);
// };
console.log(index);
/**
* 展示当前图片为第几张
* @param index 当前图片索引
*/
function showpicnum(index) {
var descrs = document.getelementbyid("discs");
descrs.innertext = "一共" + pics.length + "张图片,当前第" + ++index + "张";
}
}())
};
</script>
</head>
<body>
<div id="outer">
<p id="discs"></p>
<img src="imgs/1.png"/><br>
<button id="btn1" type="button" value="上一张">上一张</button>
<button id="btn2" type="button" value="下一张">下一张</button>
</div>
</body>
</html>
文档目录:
效果如下:
以上所述是小编给大家介绍的javascriptdom图片切换小案例详解整合，希望对大家有所帮助
上一篇： 芝麻糊怎么吃好吃