Question

我想创建一个大约400 x 100px的区域，在这里将以无限动画运动图像。它应该用于展示我们的合作伙伴或新产品的徽标。

我的目标是这样的:(但是在较小的宽度范围内）

您可以在此网站上看到此幻灯片：https://www.adbuddiz.com/

我试图通过自己制作它，我可以移动图像，但它崩溃 - 运动不顺畅。我使用.animate（）函数在jQuery 中创建它，持续时间为一秒。

我的所有代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>Logo Slider</title>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>

    <style>
        #slider {
            position: relative;
            width: 350px;
            height: 80px;
            left: 200px;
            /*overflow: hidden;*/
            border: 1px solid red;
        }

        #slider ul {
            position: relative;
            margin: 10px 0;
            padding: 0;
            height: 60px;
            list-style: none;
            border: 1px solid black;
        }

        #slider li {
            float: left;
        }
    </style>

    <script>
        $(document).ready(function() {

            var ul = $('ul');
                li = ul.find('li');
                ul_width = 0;

            $(ul).children().each(function() {
                ul_width = ul_width + $(this).width();
            });

            ul.css({ width: ul_width });


            var images_array = $("#slider ul li").map(function () {
                return $(this).width();
            }).get();

            var i = 0;
            anim();

            function anim() { 
                ul.animate({ left: ul.position().left - images_array[i] }, 1000, function() {

                    //move the first item and put it as last item
                    $('li:last').after($('li:first'));

                    //set the default item to correct position
                    ul.css({ left: ul.position().left + images_array[i] });

                    anim(); 
                });
            }
        });
    </script>
</head>
<body>

    <div id="slider">
        <ul>
            <li> <img src="logo-adidas.png"    alt="Image 1" width="100"/> </li>
            <li> <img src="logo-amazon.png"    alt="Image 2" width="100"/> </li>
            <li> <img src="logo-android.png"   alt="Image 3" width="100"/> </li>
            <li> <img src="logo-ebay.png"      alt="Image 4" width="100"/> </li>
            <li> <img src="logo-hp.png"        alt="Image 5" width="100"/> </li>
        </ul>
    </div>

</body>
</html>

不幸的是，在jsfiddle图像上没有向左移动，但在浏览器中，它们是。

请有人帮助我，如何制作流畅的无限图像幻灯片，如第一个链接所示？

Answer 1

运动不顺畅。

尝试将.animate() easing选项设为"linear"，并在overflow:hidden #slider

处删除文字css周围的评论

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8">
  <title>Logo Slider</title>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <style>
    #slider {
      position: relative;
      width: 380px;
      height: 60px;
      left: calc(380px / 4);
      border: 1px solid red;
      overflow: hidden;
    }
    #slider ul {
      position: relative;
      margin: 0;
      padding: 0;
      height: 58px;
      list-style: none;
      border: 1px solid black;
    }
    #slider li {
      float: left;
    }
  </style>
</head>
<body>
  <div id="slider">
    <ul>
      <li>
        <img src="http://lorempixel.com/100/60?1" alt="Image 1" width="100" />
      </li>
      <li>
        <img src="http://lorempixel.com/100/60?2" alt="Image 2" width="100" />
      </li>
      <li>
        <img src="http://lorempixel.com/100/60?3" alt="Image 3" width="100" />
      </li>
      <li>
        <img src="http://lorempixel.com/100/60?4" alt="Image 4" width="100" />
      </li>
      <li>
        <img src="http://lorempixel.com/100/60?5" alt="Image 5" width="100" />
      </li>
    </ul>
  </div>
  <script>
    $(document).ready(function() {

      var ul = $('ul');
      li = ul.find('li');
      ul_width = 0;

      $(ul).children().each(function() {
        ul_width = ul_width + $(this).width();
      });

      ul.css({
        width: ul_width
      });

      var images_array = $("#slider ul li").map(function() {
        return $(this).width();
      }).get();

      var i = 0;
      anim();

      function anim() {
        ul.animate({
          left: ul.position().left - images_array[i]
        }, 1000, "linear", function() {

          //move the first item and put it as last item
          $('li:last').after($('li:first'));

          //set the default item to correct position
          ul.css({
            left: ul.position().left + images_array[i]
          });

          anim();
        });
      }
    });
  </script>
</body>
</html>

如何动画无限图像幻灯片？

1 个答案: