Hình ảnh mảng trong javascript

Question

Sửa đổi tác vụ trước đó để các mũi tên tiến và lùi cũng xuất hiện phía trên hình ảnh. Tức là bản thân thanh trượt sẽ được cuộn theo bộ đếm thời gian, nhưng nếu muốn, người dùng cũng có thể cuộn qua nó bằng các liên kết

Nội dung chính Show

Định nghĩa và cách sử dụng
Bộ sưu tập HTML
Của cải
phương pháp
Giá trị trả về
Thêm ví dụ
Hỗ trợ trình duyệt
Sử dụng các đối tượng mảng để hiển thị một mảng hình ảnh trong JavaScript
Sử dụng mảng để hiển thị một mảng hình ảnh trong JavaScript
Làm cách nào để tạo mảng hình ảnh trong JavaScript?
Hình ảnh mảng là gì?
Làm cách nào để thêm liên kết hình ảnh vào mảng trong JavaScript?
Làm cách nào để hiển thị hình ảnh trong JavaScript?

pix[0]=new Image;
pix[0].src="r/r1.jpg";
pix[1]=new Image;
pix[1].src="r/r2.jpg";
pix[2]=new Image;
pix[2].src="r/r3.jpg";
  .
  .
  .
pix[9]=new Image;
pix[9].src="r/r10.jpg";

hãy để mỗi phần tử của mảng là một đối tượng Hình ảnh với nguồn được xác định bởi một chuỗi đề cập đến một tệp chứa ảnh

Chỉ mã JavaScript

    const images = ["1.png", "2.png", "3.png"];
    const arrayImagesElement = document.getElementById("arrayImages");

    function createImageNode(fileName, altText) {
      const img = new Image();
      img.src = fileName;
      img.alt = altText;
      return img;
    }

    images.forEach(img => {
      const altText = "The filename for this image : " + img; 
      arrayImagesElement.appendChild(createImageNode(img, altText));
    });

HTML và JS với các bình luận



  
    
    
    Print JS Array

Thí dụ

Số lượng

Previous Image Next Image

0 nếu chỉ mục nằm ngoài phạm vi. item(index)Trả về phần tử có chỉ số đã chỉ định (bắt đầu từ 0).
Trả về




    
    
    Image Iteration


    Click to see the next image
    
        

     
    
        Previous Image
         Next Image

0 nếu chỉ mục nằm ngoài phạm vi. nameItem(id)Trả về phần tử có id đã chỉ định.
Trả về




    
    
    Image Iteration


    Click to see the next image
    
        

     
    
        Previous Image
         Next Image

0 nếu id không tồn tại.

Giá trị trả về

TypeDescriptionObjectMột đối tượng HTMLCollection.
Tất cả

Previous Image Next Image

3 là tính năng DOM Cấp 1 (1998)

Nó được hỗ trợ đầy đủ trong tất cả các trình duyệt

ChromeEdgeFirefoxSafariOperaIECóCóCóCóCó9-11

Hướng dẫn này hướng dẫn bạn về cách tạo và lặp lại mảng hình ảnh trong JavaScript; . Mỗi ví dụ có một mã khởi động và đầu ra tương ứng để thực hành

Sử dụng các đối tượng mảng để hiển thị một mảng hình ảnh trong JavaScript

Mã HTML




    
    
    Image Iteration


    Click to see the next image
    
        

    





Previous Image
Next Image

Mã CSS

img{
    width: 350px;
    height: 350px;
}
#previousbtn{
    margin-right: 75px;;
}
#nextbtn{
    margin-left: 75px;
}

Mã JavaScript

var imgArray = new Array();

imgArray[0] = new Image();
imgArray[0].src = './images/splash class room image.jpg';

imgArray[1] = new Image();
imgArray[1].src = './images/splash animal image.jpg';

imgArray[2] = new Image();
imgArray[2].src = './images/splash nature image.jpg';

imgArray[3] = new Image();
imgArray[3].src = './images/splash food image.jpg';

imgArray[4] = new Image();
imgArray[4].src = './images/splash travel image.jpg';

function nextImage(){
    var img = document.getElementById("mainImage");
    for(var i = 0; i < imgArray.length;i++){
        if(imgArray[i].src == img.src){
            if(i === imgArray.length){
                document.getElementById("mainImage").src = imgArray[0].src;
                break;
            }
            document.getElementById("mainImage").src = imgArray[i+1].src;
            break;
        }
    }
}
function previousImage(){
    var img = document.getElementById("mainImage");
    for(var i = imgArray.length-1; i >=0 ;i--){
        if(imgArray[i].src == img.src){
            if(i === imgArray.length){
                document.getElementById("mainImage").src = imgArray[4].src;
                break;
            }
            document.getElementById("mainImage").src = imgArray[i-1].src;
            break;
        }
    }
}

đầu ra

Previous Image Next Image

6 là một đối tượng




    
    
    Image Iteration


    Click to see the next image
    
        

     
    
        Previous Image
         Next Image

7.

img{
    width: 350px;
    height: 350px;
}
#previousbtn{
    margin-right: 75px;;
}
#nextbtn{
    margin-left: 75px;
}

0 cũng được xác định bằng cách gán một chuỗi đề cập đến tên tệp có hình ảnh cụ thể đó

Hàm

img{
    width: 350px;
    height: 350px;
}
#previousbtn{
    margin-right: 75px;;
}
#nextbtn{
    margin-left: 75px;
}

1 lấy phần tử đầu tiên có id

img{
    width: 350px;
    height: 350px;
}
#previousbtn{
    margin-right: 75px;;
}
#nextbtn{
    margin-left: 75px;
}

2 và sau đó lặp lại các hình ảnh cuối cùng. Hàm

img{
    width: 350px;
    height: 350px;
}
#previousbtn{
    margin-right: 75px;;
}
#nextbtn{
    margin-left: 75px;
}

3 cũng lấy phần tử đầu tiên có id

img{
    width: 350px;
    height: 350px;
}
#previousbtn{
    margin-right: 75px;;
}
#nextbtn{
    margin-left: 75px;
}

2 (giống như phương thức

img{
    width: 350px;
    height: 350px;
}
#previousbtn{
    margin-right: 75px;;
}
#nextbtn{
    margin-left: 75px;
}

1) nhưng lặp từ hình ảnh hiện tại sang ngược lại

Sử dụng mảng để hiển thị một mảng hình ảnh trong JavaScript

Mã HTML

    const images = ["1.png", "2.png", "3.png"];
    const arrayImagesElement = document.getElementById("arrayImages");

    function createImageNode(fileName, altText) {
      const img = new Image();
      img.src = fileName;
      img.alt = altText;
      return img;
    }

    images.forEach(img => {
      const altText = "The filename for this image : " + img; 
      arrayImagesElement.appendChild(createImageNode(img, altText));
    });

2

Mã CSS

    const images = ["1.png", "2.png", "3.png"];
    const arrayImagesElement = document.getElementById("arrayImages");

    function createImageNode(fileName, altText) {
      const img = new Image();
      img.src = fileName;
      img.alt = altText;
      return img;
    }

    images.forEach(img => {
      const altText = "The filename for this image : " + img; 
      arrayImagesElement.appendChild(createImageNode(img, altText));
    });

3

Mã JavaScript

    const images = ["1.png", "2.png", "3.png"];
    const arrayImagesElement = document.getElementById("arrayImages");

    function createImageNode(fileName, altText) {
      const img = new Image();
      img.src = fileName;
      img.alt = altText;
      return img;
    }

    images.forEach(img => {
      const altText = "The filename for this image : " + img; 
      arrayImagesElement.appendChild(createImageNode(img, altText));
    });

4

đầu ra

Previous Image Next Image

6 và chỉ định thuộc tính

img{
    width: 350px;
    height: 350px;
}
#previousbtn{
    margin-right: 75px;;
}
#nextbtn{
    margin-left: 75px;
}

0 của chúng. Hàm này được gọi ngay sau khi trang được tải bằng sự kiện

img{
    width: 350px;
    height: 350px;
}
#previousbtn{
    margin-right: 75px;;
}
#nextbtn{
    margin-left: 75px;
}

9 trong thẻ.

var imgArray = new Array();

imgArray[0] = new Image();
imgArray[0].src = './images/splash class room image.jpg';

imgArray[1] = new Image();
imgArray[1].src = './images/splash animal image.jpg';

imgArray[2] = new Image();
imgArray[2].src = './images/splash nature image.jpg';

imgArray[3] = new Image();
imgArray[3].src = './images/splash food image.jpg';

imgArray[4] = new Image();
imgArray[4].src = './images/splash travel image.jpg';

function nextImage(){
    var img = document.getElementById("mainImage");
    for(var i = 0; i < imgArray.length;i++){
        if(imgArray[i].src == img.src){
            if(i === imgArray.length){
                document.getElementById("mainImage").src = imgArray[0].src;
                break;
            }
            document.getElementById("mainImage").src = imgArray[i+1].src;
            break;
        }
    }
}
function previousImage(){
    var img = document.getElementById("mainImage");
    for(var i = imgArray.length-1; i >=0 ;i--){
        if(imgArray[i].src == img.src){
            if(i === imgArray.length){
                document.getElementById("mainImage").src = imgArray[4].src;
                break;
            }
            document.getElementById("mainImage").src = imgArray[i-1].src;
            break;
        }
    }
}

0 tạo phần tử HTML (chúng tôi đang tạo phần tử




    
    
    Image Iteration


    Click to see the next image
    
        

     
    
        Previous Image
         Next Image

6 cho ví dụ này)

Sau đó, nó chỉ định

var imgArray = new Array();

imgArray[0] = new Image();
imgArray[0].src = './images/splash class room image.jpg';

imgArray[1] = new Image();
imgArray[1].src = './images/splash animal image.jpg';

imgArray[2] = new Image();
imgArray[2].src = './images/splash nature image.jpg';

imgArray[3] = new Image();
imgArray[3].src = './images/splash food image.jpg';

imgArray[4] = new Image();
imgArray[4].src = './images/splash travel image.jpg';

function nextImage(){
    var img = document.getElementById("mainImage");
    for(var i = 0; i < imgArray.length;i++){
        if(imgArray[i].src == img.src){
            if(i === imgArray.length){
                document.getElementById("mainImage").src = imgArray[0].src;
                break;
            }
            document.getElementById("mainImage").src = imgArray[i+1].src;
            break;
        }
    }
}
function previousImage(){
    var img = document.getElementById("mainImage");
    for(var i = imgArray.length-1; i >=0 ;i--){
        if(imgArray[i].src == img.src){
            if(i === imgArray.length){
                document.getElementById("mainImage").src = imgArray[4].src;
                break;
            }
            document.getElementById("mainImage").src = imgArray[i-1].src;
            break;
        }
    }
}

2 để lấy hình ảnh. Hàm

var imgArray = new Array();

imgArray[0] = new Image();
imgArray[0].src = './images/splash class room image.jpg';

imgArray[1] = new Image();
imgArray[1].src = './images/splash animal image.jpg';

imgArray[2] = new Image();
imgArray[2].src = './images/splash nature image.jpg';

imgArray[3] = new Image();
imgArray[3].src = './images/splash food image.jpg';

imgArray[4] = new Image();
imgArray[4].src = './images/splash travel image.jpg';

function nextImage(){
    var img = document.getElementById("mainImage");
    for(var i = 0; i < imgArray.length;i++){
        if(imgArray[i].src == img.src){
            if(i === imgArray.length){
                document.getElementById("mainImage").src = imgArray[0].src;
                break;
            }
            document.getElementById("mainImage").src = imgArray[i+1].src;
            break;
        }
    }
}
function previousImage(){
    var img = document.getElementById("mainImage");
    for(var i = imgArray.length-1; i >=0 ;i--){
        if(imgArray[i].src == img.src){
            if(i === imgArray.length){
                document.getElementById("mainImage").src = imgArray[4].src;
                break;
            }
            document.getElementById("mainImage").src = imgArray[i-1].src;
            break;
        }
    }
}

3 nối thêm phần tử




    
    
    Image Iteration


    Click to see the next image
    
        

     
    
        Previous Image
         Next Image

6 vào phần tử có id là

var imgArray = new Array();

imgArray[0] = new Image();
imgArray[0].src = './images/splash class room image.jpg';

imgArray[1] = new Image();
imgArray[1].src = './images/splash animal image.jpg';

imgArray[2] = new Image();
imgArray[2].src = './images/splash nature image.jpg';

imgArray[3] = new Image();
imgArray[3].src = './images/splash food image.jpg';

imgArray[4] = new Image();
imgArray[4].src = './images/splash travel image.jpg';

function nextImage(){
    var img = document.getElementById("mainImage");
    for(var i = 0; i < imgArray.length;i++){
        if(imgArray[i].src == img.src){
            if(i === imgArray.length){
                document.getElementById("mainImage").src = imgArray[0].src;
                break;
            }
            document.getElementById("mainImage").src = imgArray[i+1].src;
            break;
        }
    }
}
function previousImage(){
    var img = document.getElementById("mainImage");
    for(var i = imgArray.length-1; i >=0 ;i--){
        if(imgArray[i].src == img.src){
            if(i === imgArray.length){
                document.getElementById("mainImage").src = imgArray[4].src;
                break;
            }
            document.getElementById("mainImage").src = imgArray[i-1].src;
            break;
        }
    }
}

5

Nói một cách đơn giản, hàm

img{
    width: 350px;
    height: 350px;
}
#previousbtn{
    margin-right: 75px;;
}
#nextbtn{
    margin-left: 75px;
}

6 đang tạo các thẻ




    
    
    Image Iteration


    Click to see the next image
    
        

     
    
        Previous Image
         Next Image

6 trong thẻ có giá trị id là

var imgArray = new Array();

imgArray[0] = new Image();
imgArray[0].src = './images/splash class room image.jpg';

imgArray[1] = new Image();
imgArray[1].src = './images/splash animal image.jpg';

imgArray[2] = new Image();
imgArray[2].src = './images/splash nature image.jpg';

imgArray[3] = new Image();
imgArray[3].src = './images/splash food image.jpg';

imgArray[4] = new Image();
imgArray[4].src = './images/splash travel image.jpg';

function nextImage(){
    var img = document.getElementById("mainImage");
    for(var i = 0; i < imgArray.length;i++){
        if(imgArray[i].src == img.src){
            if(i === imgArray.length){
                document.getElementById("mainImage").src = imgArray[0].src;
                break;
            }
            document.getElementById("mainImage").src = imgArray[i+1].src;
            break;
        }
    }
}
function previousImage(){
    var img = document.getElementById("mainImage");
    for(var i = imgArray.length-1; i >=0 ;i--){
        if(imgArray[i].src == img.src){
            if(i === imgArray.length){
                document.getElementById("mainImage").src = imgArray[4].src;
                break;
            }
            document.getElementById("mainImage").src = imgArray[i-1].src;
            break;
        }
    }
}

5

Dòng mã đầu tiên trong hàm

img{
    width: 350px;
    height: 350px;
}
#previousbtn{
    margin-right: 75px;;
}
#nextbtn{
    margin-left: 75px;
}

1 nhận thẻ




    
    
    Image Iteration


    Click to see the next image
    
        

     
    
        Previous Image
         Next Image

6 đầu tiên của phần tử có id là

var imgArray = new Array();

imgArray[0] = new Image();
imgArray[0].src = './images/splash class room image.jpg';

imgArray[1] = new Image();
imgArray[1].src = './images/splash animal image.jpg';

imgArray[2] = new Image();
imgArray[2].src = './images/splash nature image.jpg';

imgArray[3] = new Image();
imgArray[3].src = './images/splash food image.jpg';

imgArray[4] = new Image();
imgArray[4].src = './images/splash travel image.jpg';

function nextImage(){
    var img = document.getElementById("mainImage");
    for(var i = 0; i < imgArray.length;i++){
        if(imgArray[i].src == img.src){
            if(i === imgArray.length){
                document.getElementById("mainImage").src = imgArray[0].src;
                break;
            }
            document.getElementById("mainImage").src = imgArray[i+1].src;
            break;
        }
    }
}
function previousImage(){
    var img = document.getElementById("mainImage");
    for(var i = imgArray.length-1; i >=0 ;i--){
        if(imgArray[i].src == img.src){
            if(i === imgArray.length){
                document.getElementById("mainImage").src = imgArray[4].src;
                break;
            }
            document.getElementById("mainImage").src = imgArray[i-1].src;
            break;
        }
    }
}

5.

    const images = ["1.png", "2.png", "3.png"];
    const arrayImagesElement = document.getElementById("arrayImages");

    function createImageNode(fileName, altText) {
      const img = new Image();
      img.src = fileName;
      img.alt = altText;
      return img;
    }

    images.forEach(img => {
      const altText = "The filename for this image : " + img; 
      arrayImagesElement.appendChild(createImageNode(img, altText));
    });

22 đưa bạn đến hình ảnh đầu tiên nếu bạn có hình ảnh cuối cùng trong đầu ra

Làm cách nào để tạo mảng hình ảnh trong JavaScript?

Cách đơn giản nhất, dễ hiểu nhất để tạo một mảng hình ảnh là khai báo một đối tượng mảng và đẩy các URL tới hình ảnh của bạn vào đó . // Khai báo một đối tượng mảng cho mảng ảnh let arrayOfImages = []; .

Hình ảnh mảng là gì?

Hình ảnh là một mảng hoặc ma trận gồm các pixel vuông (phần tử ảnh) được sắp xếp theo cột và hàng . Hình 1. Một hình ảnh — một mảng hoặc ma trận pixel được sắp xếp theo cột và hàng. Trong ảnh thang độ xám (8 bit), mỗi thành phần ảnh có cường độ được chỉ định nằm trong khoảng từ 0 đến 255.

Làm cách nào để thêm liên kết hình ảnh vào mảng trong JavaScript?

src = img[i] .

Làm cách nào để hiển thị hình ảnh trong JavaScript?

Các bước. .

Create element in the HTML code..

Add style to element and set display properties to none..

Tạo hàm JavaScript “show()” có thể truy cập hình ảnh và thay đổi thuộc tính hiển thị thành khối

Thêm nút trong mã HTML gọi hàm “show()” khi người dùng nhấp vào nút đó

programming javascript

Hình ảnh mảng trong javascript

Thí dụ

Giá trị trả về

Sử dụng các đối tượng mảng để hiển thị một mảng hình ảnh trong JavaScript

Sử dụng mảng để hiển thị một mảng hình ảnh trong JavaScript

Làm cách nào để tạo mảng hình ảnh trong JavaScript?

Hình ảnh mảng là gì?

Làm cách nào để thêm liên kết hình ảnh vào mảng trong JavaScript?

Làm cách nào để hiển thị hình ảnh trong JavaScript?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội