Проблема со слайд-шоу в javascript с использованием файла json - PullRequest
Новая
       2

Проблема со слайд-шоу в javascript с использованием файла json

0 голосов
/ 02 апреля 2019

Я пишу программу, которая берет json-файл из URL и после этого отображает всю информацию в div. Проблема в том, что я хочу сделать анимацию, которая отображает только одну «новость» за раз.

Я видел всю информацию до того, как написал код для fadeIn и fadeOut, я очень не знаю, как решить эту проблему. 

  <head>
      <style>#mypanel {
            position: relative;
            width: 100%;
            height: 1080px;
          }
          #mypanel > div {
            position: absolute;

          }
          div .title {
              color: #fff;
              font-size: 18pt;
              font-weight: bold;
              text-align: center;
          }
          div .description {
              color: #fff;
              font-size: 14pt;
          }

      </style>
  </head>


<script>
$(document).ready(function(){
    var text = [];
    var previous = null;
    var current = null;
        setInterval(function() {
            $.getJSON("mySite.com", function(news){
                current = JSON.stringify(news);
                if (previous && current && previous !== current) {
                    location.reload();
                }
                previous = current;
                for (var i = 0, len = news.length; i < len; i++) {

                    if (news[i].imgFilePath == null && news[i].imgPosition == null){
                        text[i] = `
                                  <div class="news">
                                    <div></div>
                                    <div class="title">${news[i].title}</div>
                                    <div class="description">${news[i].description}</div>
                                  </div>
                                  `
                    }
                    else {
                      if(news[i].imgPosition == 't'){
                        text[i] = `
                                  <div class="news">
                                    <div><img class="top" src="img/${news[i].imgFilePath.split("/").pop()}"/></div>
                                    <div class="title">${news[i].title}</div>
                                    <div class="description">${news[i].description}</div>
                                  </div>
                                  `
                      }

                      else if(news[i].imgPosition == 'b'){
                        text[i] = `
                                  <div class="news">
                                    <div class="title">${news[i].title}</div>
                                    <div class="description">${news[i].description}</div><br>
                                    <div><img class="bottom" src="img/${news[i].imgFilePath.split("/").pop()}"/></div>
                                  </div>
                                  `
                      }
                      else if(news[i].imgPosition == 'l'){
                        text[i] = `
                                    <div class="row">
                                      <div class="column1">
                                        <img class="left" src="img/${news[i].imgFilePath.split("/").pop()}"/>
                                      </div>
                                      <div class="column2">
                                        <span class="title">${news[i].title}</span>
                                        <span class="description">${news[i].description}</span>
                                      </div>
                                    </div>
                                  `
                      }
                      else {
                        text[i] = `
                                    <div class="row">
                                      <div class="column3">
                                        <span class="title">${news[i].title}</span>
                                        <span class="description">${news[i].description}</span>
                                      </div>
                                      <div class="column4">
                                        <img class="right" src="img/${news[i].imgFilePath.split("/").pop()}"/>
                                      </div>
                                    </div>
                                  `
                      }
                    }

                    $("#mypanel").html(text.join(""));
                    $("#mypanel > div:gt(0)").hide();
                    setInterval(function() {
                      $('#mypanel > div:first')
                        .fadeOut(1000)
                        .next()
                        .fadeIn(1000)
                        .end()
                        .appendTo('#mypanel');
                      },  2000);
                }
              });
      }, 2000);
    });
</script>

`

1 Ответ

0 голосов
/ 09 апреля 2019

Итак, ситуация была такова, что у меня был json из URL, этот json содержит заголовок, описание, изображение и положение изображения.

Этот код ниже принимает этот json, преобразует егов массив (называемый новостями) и записывает всю информацию в div, называемый mypanel, который показывает одну за другой каждую новость с эффектом fadeOut fadeIn. 

  <script>
   $(document).ready(function(){
    var text = [];
      $.getJSON($url, function(news){
        for (var i = 0, len = news.length; i < len; i++) {
          if (news[i].imgFilePath == null && news[i].imgPosition == null){
            text[i] = `
                      <div class="news">
                        <div class="title">${news[i].title}</div>
                        <div class="description">${news[i].description}</div>
                      </div>
                      `
          }
          else {
            if(news[i].imgPosition == 't'){
              text[i] = `
                        <div class="news">
                          <div><img class="top" src="img/${news[i].imgFilePath.split("/").pop()}"/></div>
                          <div class="title">${news[i].title}</div>
                          <div class="description">${news[i].description}</div>
                        </div>
                        `
            }

            else if(news[i].imgPosition == 'b'){
              text[i] = `
                        <div class="news">
                          <div class="title">${news[i].title}</div>
                          <div class="description">${news[i].description}</div><br>
                          <div><img class="bottom" src="img/${news[i].imgFilePath.split("/").pop()}"/></div>
                        </div>
                        `
            }
            else if(news[i].imgPosition == 'l'){
              text[i] = `
                        <div class="row">
                          <div class="column1">
                            <img class="left" src="img/${news[i].imgFilePath.split("/").pop()}"/>
                          </div>
                          <div class="column2">
                            <span class="title">${news[i].title}</span>
                            <span class="description">${news[i].description}</span>
                          </div>
                        </div>
                        `
            }
            else {
              text[i] = `
                        <div class="row">
                          <div class="column3">
                            <span class="title">${news[i].title}</span>
                            <span class="description">${news[i].description}</span>
                          </div>
                          <div class="column4">
                            <img class="right" src="img/${news[i].imgFilePath.split("/").pop()}"/>
                          </div>
                        </div>
                        `
            }
          }

          $("#mypanel").html(text.join(""));
          $("#mypanel > div:gt(0)").hide();

          setInterval(function() {
            $('#mypanel > div:first')
              .fadeOut(1000)
              .next()
              .fadeIn(1000)
              .end()
              .appendTo('#mypanel');
          },  3000);
        }
    });
  });
</script>
<div id="mypanel"></div>
<script>
  function timedRefresh(timeoutPeriod) {
       setTimeout("location.reload(true);",timeoutPeriod);
   }
   window.onload = timedRefresh(900000);
</script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...