2. 程式人生 > >JavaScript之數組切換圖片

JavaScript之數組切換圖片

阿新 • • 發佈：2019-01-06
初始 pre 代碼示例 tel back 技術分享 負數 ati title

代碼示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>數組切換圖片</title>
    <style type="text/css">
    body{
        background:#96D5E8;
    }
         #box{
             width: 500px;
             height: 420px;
             margin
 
: 10px auto;
             position: relative;
             border:4px solid purple;
             border-radius: 20px;
         }
         #box img{
             width: 500px;
             height: 420px;
             border-radius: 20px;
         }
         #box a{
             width: 50px;
             height
 
: 50px;
             border:1px solid #1488F6;
             text-decoration: none;
             text-align: center;
             font: 20px/50px "simhei";
             border-radius: 4px;
             position: absolute;
             top: 50%;
             margin-top: -25px;
         }
         #left
 
{
             left: -100px;
         }
         #right{
             right: -100px;
         }
    </style>
</head>
<body>
    <div id="box">
        <img src="img1.jpg" alt="" id="img">
        <a href="#" id="left">< </a>
        <a href="#" id="right"> > </a>
    </div>
</body>
</html>

<script type="text/javascript">
    var img=document.getElementById(‘img‘);
    var left=document.getElementById(‘left‘);
    var right=document.getElementById(‘right‘);

    var arr=[‘img1.jpg‘,‘img2.jpg‘,‘img3.jpg‘,‘img4.jpg‘,‘img5.jpg‘,‘img6.jpg‘,‘img7.jpg‘,];
    var num=0;
    right.onclick=function(){
        num+=1;
        if(num==arr.length){
            num=0;
        }
      img.src=arr[num];
    };
    left.onclick=function(){
        num--;
        if( num == -1){
                    num = arr.length -1;
                }
        img.src=arr[num];
    }
</script>

最重要的一部分

left.onclick=function(){
        num--;
        if( num == -1){
                    num = arr.length -1;
                }
        img.src=arr[num];
    }
如果先右擊一次,此時下標為1,再點擊左邊,num--=0;這時候初始圖片也能顯示,再左擊一次為負數,等於-1時,切換成最後一張圖片
大功告成

技術分享圖片

JavaScript之數組切換圖片
   
 
 
 
 

            
  

           

              
              

            

            
相關推薦

			   
            
            
            
 

    


    
    
JavaScript之數組切換圖片

     
 初始   pre   代碼示例   tel   back   技術分享   負數   ati   title   代碼示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"& 



  
 

    


    
    
Javascript之數組

     
 pow   tab   nsh   循環   字符   第一個   方式   reverse   ast   一、概念
　　數組是值的有序集合。每個值叫做一個元素，兒每個元素值數組中有一個位置，以數字表示，稱為索引。數組的元素可以是任意類型，並且同一個數組中的不同元素也可能有不同的類型。
二、創建數組
　　1 



  
 

    


    
    
JavaScript之數組五大叠代方法總結

     
 col   per   apr   分數   沒有   dex   操作   指定   和數   ES5定義了五個叠代方法，每個方法都接收兩個參數：要在每一項上運行的函數和運行該函數的作用域對象（可選的），作用域對象將影響this的值。傳入這些方法中的函數會接收三個參數：數組的項的值、該項在數組中的位置和數組 



  
 

    


    
    
javascript 之 數組

     
 eve   基於   最新   -o   mapr   arr   asc   java   tin   定義：var colors=new Array();
　　var colors=new Array(3);
　　var colors=new Array(‘red‘);
　　var colors=[‘re 



  
 

    


    
    
JavaScript常用技巧之數組操作

     
 filter   style   ==   indexof   bsp   pop   元素   過濾   ice   1、獲取最後數組中最後一個元素

. arr.slice(-1).pop() 

. arr[arr.length - 1]

2、過濾重復元素

arr.filter(fu 



  
 

    


    
    
C語言之數組

     
 分時   一維數組   分布   效率   常量指針   指針   div   pre   數組指針   六、數組：
6.1、大部分時間：數組名 == 常量指針。
6.2、

int array[10] = {1,2,3,4,5};
int *parray = array; //數組的首元素地址
int *p 



  
 

    


    
    
常見面試題之數組

     
 --   子數組   一次   寶典   和為s的兩個數字   n)   class   時間   整數   

參考文獻：
1.《編程之美》
2.《劍指offer》
3.《王道程序猿求職寶典》
常見題例如以下：
1.二維數組中查找某個數。該數組滿足：左->右：遞增，上->下：遞增。------- 



  
 

    


    
    
java基礎之數組

     
 和平   system.in   return   必須   sys   jdk   ole   否則   語法   1、數組的定義
數組是相同數據類型的有序集合，數組是一種特殊類型的變量，是在內存中開辟的一片連續的存儲空間
數組的元素：數組中的保存的具體的值
數組的長度：數組中能保存的最大得元素的個數。
數 



  
 

    


    
    
JavaScript中數組對象詳解

     
 稀疏數組   nsh   isa   學習過程   bnf   value   明顯   global   sci   Array對象即數組對象用於在單個變量中存儲多個值，JS的數組是弱類型的，所以允許數組中含有不同類型的元素，數組元素甚至可以是對象或者其他數組。

創建數組的語法

1、Array構造器
1 



  
 

    


    
    
二分法之數組去重和找最小值

     
 如果   math   mat   n)   分法   type   arr   push   else if   二分&數組去重

<script type="text/javascript">
		var arr = [1, 2, 3, 4, 5, 1, 2, 3, 4, 5, 5,  



  
 

    


    
    
shell編程進階之數組

     
 shell   數組   declare   eval   數組ARRAY變量：存儲單個元素的內存空間數組：存儲多個元素的連續的內存空間，相當於多個變量的集合，元素編號支持稀疏格式，即索引編號不連續。 高級變量用法 - 有類型變量Shell變量一般是無類型的，但是bash提供了declare和typeset兩 



  
 

    


    
    
基礎  之  數組

     
 color   code   arr   style   [0   ray   鍵值對   輸出   col   shell中的數組

array = (1 2 3)
array = ([1]=ins1 [2]=ins2 [3]=ins3)array = ($(命令))         # 三種定義數組，直接 



  
 

    


    
    
Java之數組

     
 pack   替換   range   double   數組長度   scanner   最小   private   tostring   數組概述
數組是具有相同數據類型的一組數據的集合。數組中的每個元素具有相同的數據類型。數組的長度是固定的。在Java中同樣將數組看作是一個對象，雖然基本數據類型不是對 



  
 

    


    
    
集合框架之數組集合算法

     
 java如何檢測程序的健康程度？如果想要知道程序運行所占的CPU和內存的情況可以使用飛行器，這樣就可以知道程序的穩定性了。在JDK的bin目錄下可以找到飛行器。如下圖： 數組集合算法：1.數組與集合的區別和聯系： 數組是有限存儲（規定了數組長度就只能存儲那麽多值），而集合是無限存儲，但其實集合也是由數組做成的 



  
 

    


    
    
08.18 javascript 06 數組 數組的概念 創建數組 讀取數組中的元素 稀疏數組 添加和刪除數組的元素 數組遍歷 多維數組  數組的方法 類數組對象 作為數組的字符串

     
 有序集合   數組元素   .cn   spa   取字符串   splice   ima   一個   -1   # 數組
### 數組的概念
* 數組是值的有序集合
* 數組中的每個值 稱之為 元素
* 每個元素可以是任意數據類型的值
* 每個元素都有索引（下標）
* 元素的索引從0開始，按照順序遞增。  



  
 

    


    
    
shell之數組的使用

     
 shell之數組數組 Array 		一段連續的內存空間 	1) 定義數組 [[email protected]/*  */ shell]# aa[0]=martin[[email protected]/*  */ shell]# aa[1]=jerry[[email prote 



  
 

    


    
    
javascript中數組和字符串的方法比較

     
 很多   ext   javascrip   new   ole   多個   轉換   join()   ber   前面的話
　　字符串和數組有很多的相同之處，它們的方法眾多，且相似度很高；但它們又有不同之處，字符串是不可變值，於是可以把其看作只讀的數組。本文將對字符串和數組的類似方法進行比較
 
可索引 



  
 

    


    
    
Shell入門（四）之數組

     
 定義   col   元素   array   多維   開始   code   logs   shel   一、一維數組
　　bash支持一維數組（不支持多維數組），並且沒有限定數組的大小。
　　類似與C語言，數組元素的下標由0開始編號。
 
二、定義數組
在Shell中，用括號來表示數組，數組元素用"空格 



  
 

    


    
    
bash之數組增刪改查

     
 linux   bash   array   bash之數組-增刪改查簡介：存儲多個元素的連續的內容空間數組名：自定義索引：編號從0開始，屬於數值索引：    註意：索引也可支持使用自定義的格式，而不僅僅是數值格式；bash的數組支持稀疏格式：增聲明數組：declare -a array_name關聯數組：d 



  
 

    


    
    
JavaScript利用數組原型，添加方法實現遍歷多維數組每一個元素

     
 多功能   學習   核心   java   自己實現   array   利用   我們   try   原型就是提供給我們為了讓我們擴展更多功能的。
今天學習了用js模擬底層代碼，實現數組多維的遍歷。思想是在數組原型上添加一個方法。

 1 //  js中的數組forEach方法，傳入回掉函數 能夠幫助我