今天开始学习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. Django自定义过滤器
			
    1.首先在在settings中的INSTALLED_APPS配置当前app,不然django无法找到自定义的simple_tag. 2.在app中创建templatetags模块(模块名只能是temp ...
    
			
    2. 
						
  2. ORACLE SQL 实现IRR的计算
			
    一.IRR计算的原理: 内部收益率(Internal Rate of Return (IRR)),就是资金流入现值总额与资金流出现值总额相等.净现值等于零时的折现率. 用公式 标识:-200+[30/ ...
    
			
    3. 
						
  3. jQuery源代码学习笔记_bind
			
    一般想到JS的兼容性问题的时候,首先会想到addEventListener与attachEvent这一对冤家,那么我们先来看看它们有什么兼容性问题 addEventListener与attachEve ...
    
			
    4. 
						
  4. 比特币--私钥->公钥->钱包地址
			
    脑钱包-字符串SHA256散列成256bit当做私钥-彩虹表 脑钱包是开源的程序-->用户输入字符串当做密码-->经过SHA256散列算法-->256长bit位 (即是私钥)--&g ...
    
			
    5. 
						
  5. pat1017. Queueing at Bank (25)
			
    1017. Queueing at Bank (25) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue Supp ...
    
			
    6. 
						
  6. JEECMS站群管理系统-- Jeecms项目导入myeclipse
			
    1.在myeclipse中新建一个项目jeecms,将服务器中jeecms项目下web-inf文件夹下内容拷到新建项目中 解压缩jeecms-3.0.2-final-src,在src文件夹下会看到有三 ...
    
			
    7. 
						
  7. jQuery的实现编码，解决特殊字符 <script> "
			
    function htmlEncode(value){ if (value) { return jQuery('<div />').text(value).html(); } else { ...
    
			
    8. 
						
  8. [转].Net Core上用于代替System.Drawing的类库
			
    本文转自:http://www.tuicool.com/wx/iuaINjy 目前.Net Core上没有System.Drawing这个类库,想要在.Net Core上处理图片得另辟蹊径. 微软给出 ...
    
			
    9. 
						
  9. IOS如何打越狱包xcode无证书打包ios应用
			
    本文要介绍的是在无证书的情况下如何将自己应用打包出去在越狱设备上使用或发给第三方使用企业签名进行应用分发. 前提条件:拥有appleId账号,并且该账号已经注册开发者中心(无需花钱) 教程开始: 1. ...
    
			
    10. 
						
  10. StringBuilder做函数参数
			
    StringBuilder做函数参数: static void Main(string[] args) { StringBuilder sb = new StringBuilder(); Hello( ...
    
			
    11.