Как я могу выполнить HTML код с Javascript для l oop? - PullRequest
Новая
       0

Как я могу выполнить HTML код с Javascript для l oop?

0 голосов
/ 09 февраля 2020

Я пытаюсь создать страницу, где каждый фильм (из базы данных) отображается в слайдере изображений, мне удалось сделать слайд-шоу изображений, но сейчас я пытаюсь повторить этот код с помощью для l oop вместо того, чтобы каждый раз добавлять отдельный фильм.

Это мой код в настоящее время, без циклов for, я прикрепил свой HTML и внешний css файл 

tml {
  overflow: scroll;
  overflow-x: hidden;
}

::-webkit-scrollbar {
  width: 10px;
  /* remove scrollbar space */
  background: transparent;
  /* optional: just make scrollbar invisible */
}


/* optional: show position indicator in red */


/*::-webkit-scrollbar-thumb {
    background: #FF0000;
}*/

#wrapper {
  max-width: 100%;
  padding: 50px 75px 50px 45px;
  position: relative;
  bottom: 0em;
}

button:focus {
  outline: 0 !important;
}

.left-controls {
  position: absolute;
  top: 0;
  left: 0;
  width: 4%;
  height: 1000px;
  z-index: 40;
  /*background:#fff;*/
  opacity: 1;
  cursor: pointer;
  text-align: center;
  webkit justify-content: center;
  justify-content: center;
  display: webkit box;
  display: webkit flex;
  display: moz box;
  display: ms flexbox;
  display: flex;
  color: #fff;
}

.fa-chevron-left-extra {
  align-self: center;
  position: relative;
  height: auto;
  top: -250px;
  transform-origin: 55% 50%;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  font-variant: normal;
  text-transform: none;
  font-size: 2.5vw;
  transition: transform .1s ease-out 0s;
  transition-property: transform;
  transition-duration: 0.1s;
  transition-timing-function: ease-out;
  transition-delay: 0s;
  color: blue;
  opacity: .1;
}

.right-controls {
  position: absolute;
  top: 0;
  right: 0;
  width: 4%;
  height: 1000px;
  z-index: 40;
  /*background:#fff;*/
  opacity: 1;
  cursor: pointer;
  text-align: center;
  webkit justify content: center;
  justify-content: center;
  display: webkit box;
  display: webkit flex;
  display: moz box;
  display: ms flexbox;
  display: flex;
  color: #fff;
}

.fa-chevron-right-extra {
  align-self: center;
  position: relative;
  height: auto;
  top: -250px;
  transform-origin: 55% 50%;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  font-variant: normal;
  text-transform: none;
  font-size: 2.5vw;
  transition: transform .1s ease-out 0s;
  transition-property: transform;
  transition-duration: 0.1s;
  transition-timing-function: ease-out;
  transition-delay: 0s;
  color: blue;
  opacity: .1;
}

.title {
  color: #eee;
}

.module-section {
  /*max-width: 100%;*/
  overflow: hidden;
  overflow-x: scroll;
  /* border-left:1px solid #fff;
  border-right:1px solid #fff;
  */
}

ul {
  width: 600em;
  list-style-type: none;
  padding: 50px 0 50px 0;
}

#content {
  position: relative;
}


/*
.arrow-guides, .arrow-guides:hover{

font-size:29px;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
float:left;
position:relative;
top:80px;
left:-10px;
padding: 10px 5px 5px 2px;
background:#999;
color:#fff;
}
*/


/*
.arrow-guides-right, .arrow-guides-right:hover{

font-size:29px;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
float:right;
position:relative;
bottom:185px;
right:-40px;
padding: 10px 2px 5px 5px;
background:#999;
color:#fff;
}

*/

.card {
  width: 15em;
  height: 350px;
  background: mistyrose;
  float: left;
  margin-right: 10px;
  margin-bottom: 50px;
  cursor: pointer;
  transform: scale(1);
  visibility: visible;
  -moz-box-shadow: 0px 1px 5px 0px #676767;
  -webkit-box-shadow: 0px 1px 5px 0px #676767;
  box-shadow: 0px 1px 5px 0px #676767;
}

.card:hover {
  cursor: pointer;
  transform: scale(1);
  visibility: visible;
  transition: all .2s ease-in-out;
  transform: scale(1.1);
  z-index: 100;
  position: relative;
  transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
  transition-duration: 400ms;
}

.inside-top {
  width: 14em;
  height: 300px;
  position: absolute;
  text-align: center;
  top: 0;
  left: 0;
  z-index: 100;
}

.clearfix {
  overflow: auto;
  zoom: 1;
}
<div id="wrapper">
  <span id="controlL" class="left-controls" role="button" aria-label="See Previous Modules">
  <b class="fa fa-chevron-left fa-chevron-left-extra" aria-hidden="true"></b>
  </span>
  <div class="module-section clearfix">
    <!-- <button class="btn arrow-guides fa-chevron-left"></button> -->
    <ul id="content">
      <li class="card">
        <div class="inside-top">
          <input type="image" id="image" alt="1917" src="./Images/1.png">
          <h4>1917</h4>
        </div>
      </li>
      <li class="card">
        <div class="inside-top">
          <img src="./Images/2.png">
        </div>
      </li>
      <li class="card">
        <div class="inside-top">
          <img src="./Images/3.png">
        </div>
      </li>
      <li class="card">
        <div class="inside-top">
          <img src="./Images/4.png">
        </div>
      </li>
      <li class="card">
        <div class="inside-top">
          <img src="./Images/5.png">
        </div>
      </li>
      <li class="card">
        <div class="inside-top">
          <img src="./Images/6.png">
        </div>
      </li>
      <li class="card">
        <div class="inside-top">
          <img src="./Images/7.png">
        </div>
      </li>
      <li class="card">
        <div class="inside-top">
          <img src="./Images/8.png">
        </div>
      </li>
      <li class="card">
        <div class="inside-top">
          <img src="./Images/9.png">
        </div>
      </li>
      <li class="card">
        <div class="inside-top">
          <img src="./Images/10.png">
        </div>
      </li>
      <li class="card">
        <div class="inside-top">
          <img src="./Images/11.png">
        </div>
      </li>
      <li class="card">
        <div class="inside-top">
          <img src="./Images/12.png">
        </div>
      </li>
      <li class="card">
        <div class="inside-top">
          <img src="./Images/13.png">
        </div>
      </li>
      <li class="card">
        <div class="inside-top">
          <img src="./Images/14.png">
        </div>
      </li>
      <li class="card">
        <div class="inside-top">
          <img src="./Images/15.png">
        </div>
      </li>
    </ul>
  </div>
  <!--end of module-section-->
  <span id="controlR" class="right-controls" role="button" aria-label="See Previous Modules">
  <b class="fa fa-chevron-right fa-chevron-right-extra" aria-hidden="true"></b>
  </span>
  <!-- <button class="btn arrow-guides-right fa-chevron-right"></button> -->
</div>

Ответы [ 4 ]

0 голосов
/ 09 февраля 2020

В моем примере я загружаю из JSON, но вы также можете сделать то же самое с вашей БД. 

<ul id="imageLoad"></ul>

<script>
var images = [
"https://images.unsplash.com/photo-1534067783941-51c9c23ecefd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60", 
"https://images.unsplash.com/photo-1531804055935-76f44d7c3621?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60", 
"https://images.unsplash.com/photo-1531702275836-8a2922d78491?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60", 
"https://images.unsplash.com/photo-1523032217284-d9e49d6c5f04?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60", 
"https://images.unsplash.com/photo-1534142499731-a32a99935397?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"];

var loadPhotos = "";
var i;
for (i = 0; i < images.length; i++) {
  loadPhotos += "<li><img src=" + images[i] + " /></li>";
}
document.getElementById("imageLoad").innerHTML = loadPhotos;
</script>

Попробуйте дать мне знать, если это работает, и не стесняйтесь спрашивать, нуждаетесь ли вы в пояснениях.

0 голосов
/ 09 февраля 2020

Предполагая, что ваши данные хранятся в переменной, называемой film , например: 

var films = [["1917", "1.png"], ["The Lion King", "2.png"], ["Parasite", "3.png"]];

, вы можете l oop через них так: 

var i, len, films, list;
for (i = 0, len = films.length, list=""; i < len; i++) {
   list += "<li class='card'><div class='inside-top'><img src='http://yoursite/wherefilesare/" + films[i][1] + "' id='image-" + i + "><h4>" + films[i][0] + "</h4>";
}

, а затем повторить список в вашем неупорядоченном списке: 

document.getElementById("content").innerHTML = list;

Обновлен код для добавления идентификатора к изображениям. Идентификатор будет "image- (число)" и будет уникальным для каждого изображения, тогда вы можете сделать что-то вроде этого: 

document.getElementById("image-1").addEventListener("click", doSomethingMethod);
0 голосов
/ 09 февраля 2020

Привет, попробуйте этот пример: 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div id="dataOutput"></div>
</body>

<script>
    data = [
        { name: "Alessio", surname: "Bardolino", age: "20" },
        { name: "Giovanni", surname: "Told", age: "32" },
        { name: "Sonia", surname: "Bin", age: "42" }
    ]

    createTable(data);

    function createTable(data) {

        var htmlContents = "";

        const app = document.getElementById('dataOutput');

        data.forEach(resp => {
            htmlContents += "<div class='container'>";
            htmlContents += "<div><p class='name'>" + resp.name + "</p></div>";

            htmlContents += "<div class='total'><p>" + resp.surname + "</p></div>";
            htmlContents += "<div class='total'><p>" + resp.age + "</p></div>";

            htmlContents += "</div>";
        });

        app.innerHTML = htmlContents;

    }
</script>
</html>

Надеюсь, это поможет вам !!!

С уважением

0 голосов
/ 09 февраля 2020

Я думаю, это подойдет. Сделайте изменения, если это необходимо. Добавьте этот скрипт в тег скрипта. 

const ul_tag = document.getElementById("content")
let list_of_images = ["1.png","2.png","3.png"] // so on ...

list_of_images.forEach( (image, index) => {
  let card = document.createElement("li")
  card.setAttribute("class", "card")
  let div = document.createElement("div")
  div.setAttribute("class", "inside-top")
  card.appendChild(div)
  let img_tag = document.createElement("img")
  img_tag.setAttrbute("src", "./Images/"+image)
  div.appendChild(img_tag)
  ul_tag.appendChild(card)
})
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...