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
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
// Array of image file names
const images = ["1.png", "2.png", "3.png"];
// Reference to the container for the images
const arrayImagesElement = document.getElementById["arrayImages"];
// Function that creates HTMLImageElement instance
function createImageNode[fileName, atlText] {
// Learn more about the image element
// //developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image
// //developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement
const img = new Image[];
// when png images 1,2,3 exist on your machine/server, uncomment img.src = fileName;
img.src = "//i.giphy.com/media/QAsBwSjx9zVKoGp9nr/giphy.gif";
img.alt = "A gif of Keanu Reeves";
// img.src = fileName;
// img.alt = altText;
return img;
}
images.forEach[img => {
// For each file name in the 'images' array, create and append a new
// image node to the end of the list of children of
// //developer.mozilla.org/en-US/docs/Web/API/Node/appendChild
arrayImagesElement.appendChild[createImageNode[img]];
}];
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-11Hướ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ạiSử 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]];
}];
2Mã 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]];
}];
3Mã 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ínhimg{
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;
}
}
}
5Nó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;
}
}
}
5Dò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