今天开始学习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. Docker学习笔记(2)-docker镜像操作
			
    本节将会涉及Docker的镜像操作. 1. 获取镜像 如何获取Docker Hub上的镜像?可通过docker pull命令获取,其格式为: docker pull [选项] [Docker Regi ...
    
			
    2. 
						
  2. 斗鱼连接弹幕Demo_pythonC#
			
    简明扼要的说下, 就两个线程,一个 负责收数据,一个负责发心跳包. 步骤如下, 进程1,调用 发包函数,发送连接请求,然后再发送 获取弹幕类型请求,就一直循环接收数据. 进程2,循环函数,每隔45秒向 ...
    
			
    3. 
						
  3. Object公用方法
			
    Object是所有类的父类,任何类都默认继承Object. Object类到底实现了哪些方法?   1．clone方法 保护方法,实现对象的浅复制,只有实现了Cloneable接口才可以调用该方法,否 ...
    
			
    4. 
						
  4. 内存分配详解 malloc, new, HeapAlloc, VirtualAlloc，GlobalAlloc
			
    很多地方都会使用内存,内存使用过程中操作不当就容易崩溃,无法运行程序,上网Google学习一下,了解整理下他们之间的区别以及使用 ,获益匪浅 0x01 各自的定义和理解 (1)先看GlobalAllo ...
    
			
    5. 
						
  5. DOS常见命令
			
    dir: 显示一个目录中的文件和子目录 md: 创建目录 rd: 删除目录 cd: 进入指定目录 cd..: 退回到上级目录 cd\: 退回到根目录 del: 删除文件 set: 显示.设置.删除cm ...
    
			
    6. 
						
  6. Spring-cloud微服务 Eureka学习教程-单服务器配置之快速搭建EurekaServer、EurekaClient（基础）
			
    以下实例代码下载地址:https://github.com/wades2/EurekaDemo Eureka是Spring Cloud Netflix的一个子模块,也是核心模块之一.用于云端服务发现, ...
    
			
    7. 
						
  7. 设计模式之装饰器模式io的小入门(十一)
			
    装饰器模式详解地址 原文总结 定义: 在不必改变原类文件和使用继承的情况下, 动态的扩展一个对象的功能. 通过创建一个包装对象, 也就是装饰来包裹真实的对象 部分详解提示 看了一些文档, 装饰器模式非 ...
    
			
    8. 
						
  8. Flask文件目录----- db文件
			
    import sqlite3 import click from flask import current_app, g from flask.cli import with_appcontext d ...
    
			
    9. 
						
  9. baidu-aip-SDK node.js 身份证识别
			
    最近项目中客户需要实现身份证识别功能,合理计划了之后决定使用百度ai的身份证识别. 身份证识别是文字识别的一种,类似的功能有很多比如驾驶证识别等等,原理都是相同的. 对于前端初学者来说,如果要实现这种 ...
    
			
    10. 
						
  10. iDempiere 使用指南 生产插件(Manufacturing)安装过程
			
    Created by 蓝色布鲁斯,QQ32876341,blog http://www.cnblogs.com/zzyan/ iDempiere官方中文wiki主页 http://wiki.idemp ...
    
			
    11.