原生JS—实现图片循环切换的两种方法

今天我们主要讲讲如何使用原生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>

原生JS—实现图片循环切换的两种方法

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—实现图片循环切换的两种方法

编者按

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

上一篇:ThinkPHP3.2中英文切换!


下一篇:android 存储目录