Question

我有一个滑块。如果我使用html上传照片，则一切正常。当我尝试使用Json上传文件时，该图块将被拉伸并且动画无法正常运行，不再对其应用样式。图片被加载裁剪。下面的截图。错误在哪里？ 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需要几秒钟的加载时间，因此已经计算出大小。我要做的是创建一个用于滑块创建的函数，并将其添加到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();
    });

使用JSON的滑块

1 个答案: