今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法。多余的话我们就不多说了，我们一个一个开始讲吧。

1  原生JS实现图片循环切换 —— 方法一

在上栗子之前我们先简单介绍一下所用的一些知识点。首先是——JS中的数组，什么是数组呢？其实数组就是在内存空间中连续存储有序数据的结合，元素在数组中的顺序，成为下标，可以使用下标访问数组的每个元素。我们声明数组有如下方式：

1、使用字面量申明：var arr=[ ];

2、在JS中，同一数组，可以存储各种数据类型，直接将数据存储在数组中

例如：var arr=[1,"chuan",true,{},null,func];

3、使用new关键字申明：var arr=new Array(参数);

参数可以是：
     参数省略，表示创建一个空数组；
     参数为一个整数，表示申明一个length为指定长度的数组。但是这个length可以随时可变可追加。
     参数为逗号分隔的都个数值，表示数组的多个值。
     new array(1,2,3)==[1,2,3]

接着就是——setInterval，这个是用来设置定时器，每隔n秒执行一次，接受两个参数：需要执行的function、毫秒数。clearInterval  就是用来清除定时器。

现在我们上栗子啦！！

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="utf-8" />
         <title></title>
         <style type="text/css">
             #img{
                 left: -300px;
                 position: relative;
                 top:-50px
             }
         </style>
     </head>
     <body>
         <div id="div">
             <img id=obj src ="img/Shop_Isle_5-300x300.jpg" border =0 />
         </div>

     <script type="text/javascript">
         var arr=new Array();
         arr[0]="img/Shop_Isle_5-300x300.jpg";
         arr[1]="img/Shop_Isle_6-300x300.jpg";
         arr[2]="img/Shop_Isle_7-300x300.jpg";
         arr[3]="img/Shop_Isle_8-300x300.jpg";
         arr[4]="img/Shop_Isle_9-300x300.jpg";
         arr[5]="img/Shop_Isle_2-300x300.jpg";
         arr[6]="img/Shop_Isle_4-300x300.jpg";
         var curIndex=0;
         setInterval(function() {
             var obj=document.getElementById("obj");
             var img=document.getElementById("img");
             if(curIndex==arr.length - 1) {
                 curIndex=0;
             }
             else {
                 curIndex +=1;
             }
             obj.src=arr[curIndex];
             console.log(curIndex);
         },1000)
     </script>
     </body>
 </html>

2  原生JS实现图片循环切换 —— 方法二

接着我们说说使用原生JS实现图片循环切换的第二种方法。

首先我们还是先讲讲所使用的到知识——JS中的循环，JS中有很多种循环方式，我们今天主要讲讲JS中的for循环。

1、for循环有三个表达式：
    申明循环变量
    判断循环条件
    更新循环变量
   三个表达式之间用分号分隔，三个表达式可以省略，但是两个分号缺一不可。
  3、for循环执行特点：先判断，再执行，与while相同。
  4、for循环三个表达式都可以有多部分组成；第二部分多个判断条件用&& ||链接，第一三部分用逗号分隔；

讲到循环了，我们顺便说说——break和continue。

1、break：跳出本层循环，继续执行循环后面的语句。
       如果有多层嵌套，则只跳出一层。
 2、continue：跳过本次循环剩余的代码，继续执行下一次循环。
      对于for循环，continue之后执行的语句，是循环变量更新的语句i++
      对于while、do-while循环，continue之后执行的语句，是循环条件判断；
      因此，使用这两个循环时，必须将continue放到i++之后使用。否则continue跳过i++导致死循环。

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="utf-8" />
         <title>测试</title>
         <script type="text/javascript">
             var NowImg=1;//表示当前显示的div
             var MaxImg=5;//表示div的个数

             setInterval(function(){
                 for(var i=1;i<=MaxImg;i++){
                     if(NowImg==i)
                         document.getElementById("div"+NowImg).style.display='block';//当前显示的div
                     else
                         document.getElementById("div"+i).style.display='none';
                 }
                 if(NowImg==MaxImg)//判断当前div是否是最后一个，如果是则从第一个重新轮回显示
                     NowImg=1;
                 else
                     NowImg++;//设置下一个显示的图片
             },1000)
         </script>
     </head>
     <body>
         <div>
             <div id="div1" style="display:block;"><img src="img/Shop_Isle_9-300x300.jpg" /></div>
             <div id="div2" style="display:none;"><img src="img/Shop_Isle_2-300x300.jpg" /></div>
             <div id="div3" style="display:none;"><img src="img/Shop_Isle_4-300x300.jpg" /></div>
             <div id="div4" style="display:none;"><img src="img/Shop_Isle_5-300x300.jpg" /></div>
             <div id="div5" style="display:none;"><img src="img/Shop_Isle_8-300x300.jpg" /></div>
         </div>
     <body>
 </html>

编者按

　　希望今天讲的两个图片循环的小方法能对大家做网站有所帮助，增加网站上视觉亮点。也希望大家跟小编一样，继续一步一步的学习，在前端路上越走越远。

原生JS—实现图片循环切换的两种方法的更多相关文章

  1. 原生JS—实现图片循环切换及监测鼠标滚动切换图片

    今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法以及如何检测鼠标滚动循环切换图片.多余的话我们就不多说了,我们一个一个开始讲吧. 1  原生JS实现图片循环切换 -- 方法一 在上栗子之前我们 ...

  2. 原生JS实现图片循环切换

    <!-- <!DOCTYPE html> <html> <head> <title>原生JS实现图片循环切换 —— 方法一</title&g ...

  3. js如何动态创建表格（两种方法）

    js如何动态创建表格(两种方法) 一.总结 一句话总结: 1.方法一:写好创建表格的html代码,将之赋值给div的innerHTML. 2.方法二.直接用创建好的table元素的方法insertRo ...

  4. C#统计给定的文本中字符出现的次数，使用循环和递归两种方法

    前几天看了一个.net程序员面试题目,题目是”统计给定的文本中字符出现的次数,使用循环和递归两种方法“. 下面是我对这个题目的解法: 1.使用循环: /// <summary> /// 使 ...

  5. 使用js提交form表单的两种方法

    提交form表单的时候瑶族一些简单的验证,验证完后才能提交,避免无效提交. 1.当输入用户名和密码为空的时候,需要判断.这时候就用到了校验用户名和密码,这个需要在前端页面写:有两种方法,一种是用sub ...

  6. js阻止表单提交的两种方法

    下面直接看代码. <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  7. js循环遍历的两种方法for循环和for ... in 循环

    JS数组的遍历方法有两种: 第一种:一般的for循环,例如: var a = new Array("first", "second", "third& ...

  8. 用纯原生js实现jquery的ready函数(两种实现)

    第一种实现方式: var dom = new function() { var dom = []; dom.isReady = false; dom.isFunction = function(obj ...

  9. js 实现图片预览的两种方式

    第一种方式:(使用bloburl) 格式为: blob:http://localhost:8080/9d1c3f82-90ff-4891-a1a3-9cb9a9782899 blob:http://l ...

随机推荐

  1. 纠错：基于FPGA串口发送彩色图片数据至VGA显示

    今天这篇文章是要修改之前的一个错误,前面我写过一篇基于FPGA的串口发送图片数据至VGA显示的文章,最后是显示成功了,但是显示的效果图,看起来确实灰度图,当时我默认我使用的MATLAB代码将图片数据转 ...

  2. struts2-学习笔记（三）

    Struts2 学习笔记(三) 1.ognl概述: OGNL是Object Graphic Navigation Language(对象图导航语言)的缩写,它是一个开源项目. Struts2框架使用O ...

  3. Linux基础命令讲解（二）

    Linux命令基本格式: 命令 [参数] [路径文件] 方括号内容可省略 查看命令帮助手段: 1 man 命令名 (man 还可以获取配置文件,函数的帮助) 2 命令 --help 3 help 命令 ...

  4. 构造函数，This关键字

    构造函数: 即构建创造对象时调用的函数.在new的时候自动执行,给对象进行初始化.创建对象都必须要通过构造函数初始化.(有参和无参) 一个类中如果没有定义过构造函数,那么类中会有一个默认的空参数构造函 ...

  5. SQL Server数据转MySql

    正好用到SQL Server数据转MySql的知识,就分享一下, 准备:需要用到  Navicat Premium 百度上下载就好 1.打开连接MySQL数据库,新建数据库,双击数据库点击导入 2.导 ...

  6. go基础编程 day-2

    Go的常亮 关键字: Const Go常亮的多个定义: // 定义常亮的关键字 const // 定义多个常亮 const( PI = 3.14 const1 = " const2 = co ...

  7. Spring 3 AOP 概念及完整示例

    AOP概念 AOP(Aspect Oriented Programming),即面向切面编程(也叫面向方面编程,面向方法编程).其主要作用是,在不修改源代码的情况下给某个或者一组操作添加额外的功能.像 ...

  8. 【转】NOR Flash擦写和原理分析

    1. NOR FLASH 的简单介绍 NOR FLASH 是很常见的一种存储芯片,数据掉电不会丢失.NOR FLASH支持Execute On Chip,即程序可以直接在FLASH片内执行(这意味着存 ...

  9. Java跨域问题的处理详解

    1,JavaScript由于安全性方面的考虑,不允许页面跨域调用其他页面的对象,那么问题来了,什么是跨域问题? 答:这是由于浏览器同源策略的限制,现在所有支持JavaScript的浏览器都使用了这个策 ...

  10. LeetCode 674. Longest Continuous Increasing Subsequence （最长连续递增序列）

    Given an unsorted array of integers, find the length of longest continuous increasing subsequence. E ...