浅谈JavaScript_DOM学习篇_图片切换小案例

今天开始学习数字正射影像图操作，下面写一个小案例来巩固下知识点。

DOM:文档对象模型（文档对象模型)

根据编号获取页面元素： 如： var xx=文档。getelementbyid(' id ')；

根据标签获取元素： 如： var xx=文档。getelementsbytagname(' div ')；

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title title/title style * { margin : 0；padd : 0；} #外部{ width: 500px/*设置上边距50px水平居中*/margin: 50px自动；/*设置边框*/padd : 10px；背景-颜色：绿黄色；/*设置文本居中*/text-align:居中；} img { width : 500 px }/样式脚本//btn为按钮编号单击事件功能为点击后执行的操作函数函数添加点击(btn，ClickEventFunction){ var my button=document。getelementbyid(BTN)；我的按钮。onclick=click事件函数；};窗户。onload=function(){(function(){ var pics=[' imgs/1。png '，' imgs/2.png '，' imgs/3。png ']；定义变量索引=0;showPicNum(索引);var img=文档。getelementsbytagname(' img ')[0]；//var BTN 1=文档。getelementbyid(' BTN 1 ')；var BTN 2=文档。getelementbyid(' BTN 2 ')；addClick('btn1 '，function(){ index-；if(index=-1){ index=pics。长度-1；} console.log(索引'-');img。src=pics[index]；showPicNum(索引);});addClick('btn2 '，function(){ index；if(index=pics。长度){ index=0；} console.log(索引' ');img。src=pics[index]；showPicNum(索引);});////BTN 1。onclick=function(){//index-；//if(index=-1){//index=pics。长度-1；//} //console.log(索引'-');//img。src=pics[index]；//showPicNum(索引);//};//BTN 2。onclick=function(){//index；//if(index=pics。长度){//索引=0；//} //console.log(索引' ');//img。src=pics[index]；//showPicNum(索引);//};console.log(索引);/** * 展示当前图片为第几张* @param索引当前图片索引*/函数showPicNum(index){ var dess=document。getelementbyid(' disks ')；' descrs.innerText='一共pics.length '张图片，当前第'索引'张；} }()) };/script/head dydiv id=' outer ' p id=' disks '/p img src=' http : imgs/1。png/br按钮id=' BTN 1 '类型='按钮'值='上一张'上一张/button button id=' BTN 2 ' type=' button ' value='下一张'下一张/button/div/body/html文档目录：

效果如下：

以上所述是小编给大家介绍的四图片切换小案例详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！