Js基础--数组应用实例（图片切换）

       在前面的文章中，我们讲到了js中数组的具体操作，详见（Js对Array的各种操作总结），这里就不再做详细的讲解。今天主要的目的是如何用数组进行图片的简单左右切换。

       本文中的图片切换具体步骤如下：

       第1步：简单的布局并设计基本的显示样式；

       第2步：通过js获取相关元素；

       第3步： 通过数组进行图片url和对应文字描述的存储；

       第4步：初始化：包括图片的初始化，显示图片数字以及对应文字的初始化等；

       第5步：点击按钮切换图片，编写对应的函数，其实就是数组的简单应用。

       接下来先看看效果图，然后进行对应的代码讲解。

实现代码：

    
    
    
    


    

         < 
         > 
        
图片正在加载中……
        数量正在统计中……
        
    

       这个例子很简单，主要就是对数组的简单读写以及对html的属性内容读写操作。其中需要注意的是，当我们点击下一张到最后一张图片或者点击上一张到第一张时，需要设置具体的数值变化，不=否则会越界，那么图片、数字和对应的问题就没有内容。

另外做了一个可以顺序播放和循环播放图片的例子。

代码如下：

    
    
    
    



    

        
        
        
图片顺序播放