JavaScript/HTML 画像を一覧表示する方法を教えてください

Question

HTMLとCSSとJavaScriptを使用して、ショッピングサイトのように画像とその説明（商品名や価格）を一覧で表示したいのですが、思ったように表示されず困っております。

下記はHTMLだけで作成した時のウェブページなのですが、
これと同じ見せ方で、今回はJavaScriptを使用する方法を探しています。
![

また、画像の場所とそのデータはJavascriptを用いて配列を使う方法で進めたいと考えています。

var images = [
  {
  num: 1,
  src: "images/matcha1_ura.JPG",
  url: "GreenTea",
  category: "matcha",
  info: "Matcha for Urasenke",
  price: 85
  },
  {
    num: 2,
    src: "images/matcha2_omote.JPG",
    url: "GreenTea",
    category: "matcha",
    info: "Matcha for Omotesenke",
    price: 85
  },
  {
    num: 3,
    url: "images/matcha3_mushanokouji.JPG",
    alt: "GreenTea",
    category: "matcha",
    info: "Matcha for Mushanokouji",
    price: 70
  },
  {
    num: 4,
    url: "images/matcha4_oribe.JPG",
    alt: "GreenTea",
    category: "matcha",
    info: "Matcha for Oribe",
    price: 70
  }
// 一部省略
];

上記の要素を画面上に表示するために下記の関数を作りました。

function callback () {
  let wrapper = document.getElementsByClassName('contentwrap')
  showAll();

function showAll(){

  let productpic = document.createElement('div');
  
    for (var i = 0; i < images.length; i++){
    let img = document.createElement('img');
    img.src = "<img alt='" + images.alt + "'" + " src='" + images[i].url + "'/>";
    img.style = "width: 100%";

    let detail = document.createElement('h4');
    detail.innerHTML = images[i].info;

    let price = document.createElement('p');
    price.innerHTML = '$' + images[i].price + '.00';
  
    let moreinfo = document.createElement('p');
    button.innerHTML = '<a href="#" title="read more">' + "More information" +　'</a>';
  
    productpic.appendChild(img);
    productpic.appendChild(detail);
    productpic.appendChild(price);
    productpic.appendChild(moreinfo);
  
    wrapper.appendChild(productpic);
    }
}
}

画像を挿入したい場所のHTMLは下記のように書いています。

<div class="contentwrap">
 　<article class="container"> <!-- start main part-->           
   </article>

CSSもまだ上手に使えないので、ページの見た目もとても悪いのですが、そこはご容赦ください...
初心者のため分からないことがたくさんあり、基本的な関数やDOMしか使えないのですが、ご教示いただけますと幸いです。

Answer 1

このような形だと思います。

説明しやすくするため、「aaaa」という引数を使っていますが、
理解したあとに適切な名前に書き換えてください。

$(function () {
    Swing('#me'); // 文字列として渡す
});

// 汎用的に使うためにid名など要素を渡せるようにしたい
function Swing(aaaa) {
  $(aaaa).animate({
    left: "90%"
  }, 4000).animate({
    left: "0px"
  }, 4000);
  
  setTimeout(Swing(aaaa), 8000);
}

(「'header .logo'」や「'.item:not(.active) .icon'」など、
idやclassだけでなくCSSセレクタすべてが指定可能なので、私なら、「aaaa」を「selecter」などにします)

Comments

[CANMIZ]

確認が遅くなってしまい申し訳ないです。回答くださりありがとうございます！このコードで試してみます！