今天开始学习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. python单元测试框架-unittest（三）之用例执行顺序
			
    执行顺序规则: 测试类或测试方法的数字与字母顺序0~9,A-Z 执行如下脚本,理解用例执行顺序 #coding=utf-8 import unittest class Test1(unittest.T ...
    
			
    2. 
						
  2. PyCharm5 破解汉化
			
    作者博文地址:https://www.cnblogs.com/liu-shuai/ 破解: 将下列序列号复制到软件激活界面即可破解. 43B4A73YYJ-eyJsaWNlbnNlSWQiOiI0M0 ...
    
			
    3. 
						
  3. jemeter排至数据库时报：Access denied for user 'root'@'localhost' (using password:YES) 解决方案
			
    相信这个问题大部分人都遇到过,至少我遇到过三次了,而且每次原因都不一样,前段时间同学也遇到这个问题,问我怎么解决,我把我的解决思路都说了一遍,发现还不行,最后居然是另外一个原因...哎,说多了都是泪, ...
    
			
    4. 
						
  4. [一点一滴.NET]前台线程和后台线程
			
    前台线程和后台线程就是通过线程实例的属性IsBackground=true or false来区分的. 新建一个线程是默认是后台线程. 前台线程全部执行完之后,才退出进程. 进程退出,所有的后台线程全 ...
    
			
    5. 
						
  5. 【转】android ViewPager,ViewFlipper,ViewFlow实现左右滑动
			
    转自:http://blog.csdn.net/zhouyuanjing/article/details/8290454 开篇 首页只是作为ViewPager,ViewFlipper,ViewFlow ...
    
			
    6. 
						
  6. [HZOI 2015]复仇的序幕曲
			
    [题目描述] 你还梦不梦痛不痛,回忆这么重你怎么背得动 ----序言 当年的战火硝烟已经渐渐远去,可仇恨却在阿凯蒂王子的心中越来越深 他的叔父三年前谋权篡位,逼宫杀死了他的父王,用铁血手腕平定了国内所 ...
    
			
    7. 
						
  7. Video 视频播放防作弊和禁止下载
			
    1.实现效果 - 查看源码 实现视频可播放不能下载,禁止右键下载.F12源码打开链接下载 实现只在当前窗口播放,切换窗口.窗口最小化.窗口被遮挡停止播放,恢复后继续播放 在线demo:缓存完再播放 . ...
    
			
    8. 
						
  8. css悬浮右侧悬浮
			
    <html><head><title>CSSDemo</title><style type"text/css"> .ho ...
    
			
    9. 
						
  9. OnDeserializedAttribute 不能作用于 Xml Serialization 上
			
    在做测试的时候习惯用xml serialization观察结果.想当然的认为OnDeserialized Attribute 可以同样的使用,但是其实Xml Serialization 并没有实现相对 ...
    
			
    10. 
						
  10. C# 解决 邮件发送Excel附件后，excel处于锁定状态
			
    当使用c#自带的MailMessage类发送excel附件时,再次打开excel会提示处于锁定状态. 解决思路:Attachment是添加附件的类,邮件发送后没有释放该类 public string  ...
    
			
    11.