今天开始学习DOM操作,下面写一个小案例来巩固下知识点。
DOM文档对象模型(文档对象模型)
根据id获取页面元素:如:var xx=. getelementbyid (" id ");
根据标签获取元素:如:var xx=document.getElementsByTagName (" div ");
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> Title
& lt; style>
* {
保证金:0;
填充:0;
}
#{外
宽度:500 px;/*设置上边距50 px水平居中*/保证金:50 px汽车;/*设置边框*/填充:10 px;
background - color: greenyellow;/*设置文本居中*/text-align:中心;
}
img {
宽度:500 px;
}
& lt;/style>
& lt; script>//btn为按钮id clickEventFunction为点击后执行的操作函数
函数addClick (clickEventFunction btn) {
var色=. getelementbyid (btn);
色。onclick=clickEventFunction;
};
窗口。onload=function () {
(函数(){
var照片=(“一个/1. png”,
“一个/2. png”,
“一个/3. png”);
var指数=0;
showPicNum(指数);
var img=document.getElementsByTagName (img) [0];//var btn1=. getelementbyid (“btn1”);
这里做一些var=. getelementbyid(“这里”);
addClick (“btn1函数(){
指数——;
如果(指数& lt;=1) {
指数=图片。长度- 1;
}
控制台。日志(索引+“- - - - - -”);
img。src=https://www.yisu.com/zixun/pics(指数);
showPicNum(指数);
});
addClick(“这里”,函数(){
指数+ +;
如果(指数在=pics.length) {
指数=0;
}
控制台。日志(指数+ + + + + + + + +”);
img。src=https://www.yisu.com/zixun/pics(指数);
showPicNum(指数);
});////btn1。onclick=function () {//索引——;//如果(指数<=1){//指数=图片。长度- 1;//}//控制台。日志(索引+“- - - - - -”);//img。src=https://www.yisu.com/zixun/pics(指数);//showPicNum(指数);//};//这里。onclick=function () {//索引+ +;//如果(指数>=pics.length) {//指数=0;//}//控制台。日志(指数+ + + + + + + + +”);//img。src=https://www.yisu.com/zixun/pics(指数);//showPicNum(指数);//};
console.log(指数);/* *
*展示当前图片为第几张
* @param指数当前图片索引
*/函数showPicNum(指数){
var备注说明=. getelementbyid(光盘);
备注说明。innerText=实现“一”共+图片。长度+”张图片,当前第" + + +指数+“张”;
}
}())
};
& lt;/script>
& lt;/head>
& lt; body>
& lt; div id="外"比;
& lt; p id=肮馀獭弊４? lt;/p>
& lt; img src=" https://www.yisu.com/zixun/imgs/1.png "/祝辞& lt; br>
& lt;按钮id=" btn1 " type="按钮" value=" https://www.yisu.com/zixun/上一张”在上一张& lt;/button>
& lt;按钮id="这里" type="按钮" value=" https://www.yisu.com/zixun/下一张”在下一张& lt;/button>
& lt;/div>
& lt;/body>
& lt;/html>
文档目录:
效果如下:
以上所述是小编给大家介绍的JavaScriptDOM图片切换小案例详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留的言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
