javascript - 使用 json 的 slider

Question

我有一个 slider 。如果我使用 html 上传照片，那么一切正常。一旦我尝试使用 Json 上传文件， block 就会被拉伸(stretch)并且动画无法流畅运行，样式不再应用于它。图片加载裁剪。截图如下。错误在哪里？ https://ibb.co/FwbV9Gb https://ibb.co/hLjpb5p

slider .js

    var slideCount =  $(".slider ul li").length;
    var slideWidth =  $(".slider ul li").width();
    var slideHeight =  $(".slider ul li").height();
    var slideUlWidth =  slideCount * slideWidth;

    $(".slider").css({"max-width":slideWidth, "height": slideHeight});
    $(".slider ul").css({"width":slideUlWidth, "margin-left": - slideWidth });
    $(".slider ul li:last-child").prependTo($(".slider ul"));

    function moveLeft() {
      $(".slider ul").stop().animate({
        left: + slideWidth
      },700, function() {
        $(".slider ul li:last-child").prependTo($(".slider ul"));
        $(".slider ul").css("left","");
      });
    }

    function moveRight() {
      $(".slider ul").stop().animate({
        left: - slideWidth
      },700, function() {
        $(".slider ul li:first-child").appendTo($(".slider ul"));
        $(".slider ul").css("left","");
      });
    }


    $(".next").on("click",function(){
      moveRight();
    });

    $(".prev").on("click",function(){
      moveLeft();
    });


  });

html

 <div class="img">
                <div class="slider">
                    <a href="#0" class="next control">Next</a>
                    <a href="#0" class="prev control">Prev</a>              
                   <ul id="sliders">
                      <li> <img src="/img/2.jpg"> </li>
                      <li><img src="/img/4.jpg"></li> 
                       <li> <img src="/img/5.jpg"> </li>
                      <li> <img src="/img/6.jpg"> </li>
                    </ul>                                 
                  </div>
            </div>

使用 JSON (.js) 添加图像

 $(function() {
    $.getJSON('catalog.json', function(data) {
      $.each(data.catalog, function(i, category) {
        const detail= category.details;  
        const image =detail.images;      
        const $slider=$(
          "<li><img src="+image.one+"></li><li><img src="+image.two+"></li><li><img src="+image.three+"></li><li><img src="+image.four+"></li>"
        )
        console.log(image.one)
        $slider.appendTo("#sliders");       
      });
    });

Answer 1

问题很可能出在时机上。在页面加载时，所有变量都是针对宽度等计算的。但是，您的 json 需要几秒钟才能加载，因此已经计算了大小。我所做的是创建一个用于创建 slider 的函数，并将其添加到 getJson 成功回调中。

        var slideCount;
        var slideWidth;
        var slideHeight;
        var slideUlWidth;

        $.create_slider = function(){
            slideCount =  $(".slider ul li").length;
            slideWidth =  $(".slider ul li").width();
            slideHeight =  $(".slider ul li").height();
            slideUlWidth =  slideCount * slideWidth;
            $(".slider").css({"max-width":slideWidth, "height": slideHeight});
            $(".slider ul").css({"width":slideUlWidth, "margin-left": - slideWidth });
            $(".slider ul li:last-child").prependTo($(".slider ul"));
        }

        function moveLeft() {
          $(".slider ul").stop().animate({
            left: + slideWidth
          },700, function() {
            $(".slider ul li:last-child").prependTo($(".slider ul"));
            $(".slider ul").css("left","");
          });
        }

        function moveRight() {
          $(".slider ul").stop().animate({
            left: - slideWidth
          },700, function() {
            $(".slider ul li:first-child").appendTo($(".slider ul"));
            $(".slider ul").css("left","");
          });
        }


        $(".next").on("click",function(){
          moveRight();
        });

        $(".prev").on("click",function(){
          moveLeft();
        });


      });

$(function() {
    $.getJSON('catalog.json', function(data) {
      $.each(data.catalog, function(i, category) {
        const detail= category.details;  
        const image =detail.images;      
        const $slider=$(
          "<li><img src="+image.one+"></li><li><img src="+image.two+"></li><li><img src="+image.three+"></li><li><img src="+image.four+"></li>"
        )

        $slider.appendTo("#sliders");       
      });

      $.create_slider();
    });