2. 程式人生 > >JavaScript之陣列切換圖片

JavaScript之陣列切換圖片

阿新 • • 發佈：2019-01-06

程式碼示例

<!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之陣列切換圖片

     
 程式碼示例 
 
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>陣列切換圖片</title>
    <sty 



  
 

    


    
    
【JavaScript系列】JavaScript之陣列

     
  一  概述 
     JavaScript陣列同後端語言一樣，具有它自己的資料結構，歸根結底，這種資料結構，本質就是一種集合。 
     在後端語言中(如java,.net等)，陣列是這樣定義的：陣列是用來儲存相同資料型別的 



  
 

    


    
    
javascript之瀑布流圖片覆蓋

     
  
 
  今天在練習javascript實現瀑布流時遇到了一個看上去非常神奇（實際上無腦）的問題，用js載入十張圖片之後的頁面效果是這樣的： 
  
 但是想讓它們按高低順序排列即儘量不留下大量空白空間，於是尋找第一行圖片高度的最小值，然後將下一行的圖片放在高度最小的圖片下面，於是寫了下面的程式段 



  
 

    


    
    
javascript之陣列和物件的資料結構轉換

     
  
 
 最近學到物件和陣列的相關知識，將遇到的兩道較複雜的練習題貼出來  
 var scoreObject = {
    "Tony": {
        "Math": 95,
        "English": 79,
        "Music": 68
    },
    "S 



  
 

    


    
    
Web前端學習筆記——JavaScript之陣列、函式、作用域

     
 
							
							
							陣列
為什麼要學習陣列

之前學習的資料型別，只能儲存一個值(比如：Number/String。我們想儲存班級中所有學生的姓名，此時該如何儲存？

陣列的概念

所謂陣列，就是將多個元素（通常是同一型別）按一定順序排列放到一個集合中，那麼這個集合我們就稱之為陣列 



  
 

    


    
    
javascript之陣列

     
 
                
無論哪一種語言都離不開陣列，javascript也不例外。陣列是值的有序集合，這些值稱為元素。陣列有序不是說值的內容大小排序，是位置有序。位置可以用數字表示，稱為索引。由於javascript是軟型別的，所以陣列也是無型別的。這個意思呢就是陣列中可以放任意型別的值，可以是S 



  
 

    


    
    
JavaScript if判斷切換圖片

     
  
 
 <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標題文件</title 



  
 

    


    
    
JavaScript之陣列五大迭代方法總結

     
 
								
								            
							
							
							如果去問一個不太瞭解JavaScript陣列的開發人員，JavaScript的陣列有多少種迭代方法，你可能得到的答案為，for/while/do-while...等等，這個是迴圈中的方法，和我們陣列的迭 



  
 

    


    
    
JavaScript 之 陣列常用方法總結

     
 
                陣列中的常用方法總結：能改變原陣列的方法有：push,  pop,  shift,  unshift,  sort,  reverse,   splice不能改變原陣列的方法有：concat,  join,  split,  toString,  slice改變原陣列方法：1 



  
 

    


    
    
初學JavaScript之陣列練習筆記

     
 
							
							
							"陣列遍歷==============".description();
Array.prototype.name = "Array";
var arr3 = [1,2,3,4,5,6,7,8,9,0];
for(var i in arr3)
{
    arr3 



  
 

    


    
    
JavaScript之陣列排序

     
 
                
    陣列中已經存在兩個重排序方法：reverse()和sort()。
    我們先來看下比較簡單的reverse()方法： reverse()將陣列項的順序進行反轉。
 var numList1=[1,2,3,4,5,6];
 numList1.reverse();
 



  
 

    


    
    
JavaScript之陣列API、棧和佇列、氣泡排序

     
 
							
							
							
  API：已經實現的方法，我們開發人員可以直接呼叫，不需要知道原始碼。


將陣列轉化為字串

//1.
var str = arr.toString();


  
  返回陣列中的元素用逗號分隔。
  




var arr = ["s","t","r 



  
 

    


    
    
JavaScript之數組切換圖片

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

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



  
 

    


    
    
使用OC通過陣列來存放圖片並加按鈕使之能夠切換照片

     
 
							
							
							 @interface ViewController ()

//      左邊按鈕



  @property(nonatomic,strong)UIButton *leftBtn;

//     右邊按鈕



 @property(nonatomic 



  
 

    


    
    
JavaScript學習之用陣列實現圖片輪播

     
 
							
							
							js程式碼：

<script type="text/javascript">
            //定義num為0
            var num=0;
            //定義一個數組，其中元素為要實現輪播的圖片
      



  
 

    


    
    
JavaScript之圖片操作4

     
 .com   head   mouseover   實現圖   utf   set   java   步長   技術分享   本次要實現的效果是，在一個盒子裏面有一張長圖，只顯示了一部分，為方便用戶瀏覽，當鼠標移入時，圖片開始滾動，將盒子分成上下兩部分，當鼠標移入上部分時，圖片向上滾動，當鼠標移入下部分時，圖 



  
 

    


    
    
JavaScript之圖片操作5

     
 移動   asc   scrip   left   device   詳細介紹   div   com   mage   本次的圖片操作是要實現模仿天貓淘寶的放大鏡效果，如下圖所示：

其實現原理其實很簡單，主要就是定位的運用，在上面的圖中，左邊是一個div，它的大小就是左邊圖片的大小，我們稱為左窗口（原圖） 



  
 

    


    
    
Javascript陣列系列四之陣列的轉換與排序Sort方法

     
 
                    
今天我們繼續來介紹 Javascirpt 陣列中的方法，也是陣列系列的第四篇文章，因為陣列的方法眾多，每篇文章我們都對陣列的每個方法都有比較細緻的描述，只要你能夠從中成長一點點，那我們的目的就達到了，學習是一個持續的，漸進的過程。每天進步一點點，最終會有大成就。
直 



  
 

    


    
    
javascript之九種陣列去重的方法

     
 
                       陣列去重，第一反應就是for迴圈，如果一個for迴圈解決不了，那就多來幾個。。。哈哈，心血來潮查了下陣列去重的方法，是我見識短淺。以下，我將介紹九種js中陣列去重的方法：

利用 ES6 Set去重
	利用splice()去重
	利用indexOf()去重
	  



  
 

    


    
    
javascript 實現圖片2秒自動切換 滑鼠懸浮切換圖片

     
 
                <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圖片2s自動切換</title>
    <