今天开始学习DOM操作,下面写一个小案例来巩固下知识点.

DOM: document object model (文档对象模型)

根据id获取页面元素 :　如:　var xx = document.getElementById("id");

根据标签获取元素:　如:　var xx = document.getElementsByTagName("div");

src="imgs/1.png"/><br>    <button id="btn1" type="button" value="
<!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>


　　文档目录:　　　


　　　　　　　　


　　效果如下:


　　　　　　　　


上一张">上一张</button>    <button id="btn2" type="button" value="下一张">下一张</button></div></body></html>


												


											
JavaScript_DOM学习篇_图片切换小案例的更多相关文章
	

    
								
  1. 《Mysql 公司职员学习篇》 第二章 小A的惊喜
		
          第二章 小A的惊喜  ---- 认识数据库 吃完饭后,小Y和小A回到了家里,并打开电脑开始学习Mysql. 小Y:"小A,你平时的Excell文件很多的情况下,怎么样存放Exce ...
    
		
    2. 
						
  2. CSS学习------之简单图片切换
		
    最近一直在重温纯CSS,学习的时候真的才发现,css真的博大精深啊! 所以趁着学习的劲头,谢了个最简单的CSS图片切换! 先整理下思路: 首先我希望图片居中间,两边有个切换按钮,点击按钮的时候,可以实 ...
    
		
    3. 
						
  3. Android学习笔记 ImageSwitcher图片切换组件的使用
		
    activity_main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android&qu ...
    
		
    4. 
						
  4. 原生XMLHTTPResponse，jQuery-Ajax 上传文件；iframe上传图片&预览；图片验证码小案例
		
    原生AJAX Ajax主要就是使用 [XmlHttpRequest]对象来完成请求的操作,该对象在主流浏览器中均存在(除早起的IE),Ajax首次出现IE5.5中存在(ActiveX控件) 1.Xml ...
    
		
    5. 
						
  5. 《Mysql  公司职员学习篇》 第一章  小A的烦恼
		
    第一章  小A的烦恼 ----- 为什么学习数据库 和 如何选择数据库 小A是某公司的职员,公司数据部的员工,平常的大小工作,完全离不开EXCELL,而最近小A却越来越苦恼,不由的向好朋友小Y吐槽.小 ...
    
		
    6. 
						
  6. python抓取网页图片的小案例
		
    1.分析 ,要抓取的页面的信息以及对应的源码信息 blog.sina.com.cn/s/blog 93dc666c0101b1bj.html 2.代码模块: 导入正则表达的模块 导入url相关的模块  ...
    
		
    7. 
						
  7. iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化
		
    首先需要安装vue cli 3.0版本 点击添加插件, 输入iview 选中后安装 全部导入还是按需导入. 2.是否需要自定义主题变量 3.多语言的设置. 这里我们全部选择为默认 然后点击继续. 启动 ...
    
		
    8. 
						
  8. 图片切换小demo
		
    <body> <div class="body"><img src="bopin/images/bigImg1.jpg" widt ...
    
		
    9. 
						
  9. SQL查询小案例
		
    这是一篇自学MySQL的小案例,下面是部分数据信息:goods表 1.查询cate_name为‘超级本’的商品名称.价格 SELECT `name`, priceFROM goodsWHERE cat ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 连接虚机中的mysql服务
			
    1:修改mysql库中的user表的root用户的host值为% 2:授权:在mysql命令中执行 GRANT ALL PRIVILEGES ON *.* TO 'root'@'%' IDENTIFI ...
    
			
    2. 
						
  2. pat1043. Is It a Binary Search Tree (25)
			
    1043. Is It a Binary Search Tree (25) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN ...
    
			
    3. 
						
  3. 嵌入式 C 语言编程总结
			
    嵌入式 C 语言编程总结 目录: 全局变量 1.全局变量 在纯 C 语言(Pure C)开发的嵌入式程序中,需要在多处用到同一个变量,需要注意几点: 不要在头文件中对变量进行定义 头文件中变量的声明添 ...
    
			
    4. 
						
  4. Ubuntu18.10安装及优化
			
    最近机器学习很火,想来学习下,先来搭建一个学习平台. https://www.ubuntu.com 下载最新版本的系统,我这里是 18.10 桌面版. 然后进行分区,我这里在vm只创建了 80G的硬盘 ...
    
			
    5. 
						
  5. 零度4W1H提问规则
			
    WHAT:您现在的需求和目的是什么,请按条理描述清楚. WHERE:在什么平台.环境和工具下发生此问题. WHEN:何时发生的该问题,该问题是否能够重现. WHY:为什么不能通过搜索引擎来解决您的问题 ...
    
			
    6. 
						
  6. 翻String.Format源码发现的新东西：StringBuilderCache
			
    起因: 记不清楚今天是为毛点想F12看String.Format的实现源码了,反正就看到了下图的鸟东西: 瞬间石化有没有,StringBuilder还能这么获取? 研究StringBuilderCac ...
    
			
    7. 
						
  7. Android - 开发页面需了解的dip，sp，px知识，以及它们的转换
			
    工作中,时常会有任务要求开发新页面,这时一般的流程是产品经理确定要开发的页面和功能,然后设计师提供设计稿,之后由我们开发人员完成开发工作. 通常,设计师提供的设计稿尺寸标注会很详细,例如涉及到字时,字 ...
    
			
    8. 
						
  8. DVB数字电视常见信号指标解释
			
    1. 平均功率与峰值电平       峰值电平在模拟电视广播时用于表征频道信号电平强弱. 模拟电视信号是单极性.不对称的,即电视信号有一个固定黑色参考电平,比黑色亮的信号处在黑色电平线一边,同步脉冲处 ...
    
			
    9. 
						
  9. 洛谷 P2814 家谱
			
    题目背景 现代的人对于本家族血统越来越感兴趣. 题目描述 给出充足的父子关系,请你编写程序找到某个人的最早的祖先. 输入输出格式 输入格式: 输入由多行组成,首先是一系列有关父子关系的描述,其中每一组 ...
    
			
    10. 
						
  10. winform datagridview 如何设置datagridview隔行变色
			
    如何设置隔行变色. 如图:
    
			
    11.