Question

我正在尝试创建一个不断移动的轮播，每次在移动设备上每次只会显示3个徽标。我希望它仅出现在移动设备上。我不希望轮播在每个徽标后暂停，而是要不断地缓慢移动（请参见此处的示例：https://wolfppr.com/index.php/clients/，不同之处在于我希望它在一行上运行）。我也不希望它返回第一个徽标，而是不断显示徽标。

我不是专业编码员，而是设计师。我尝试尝试一下并进行编码，但是在移动设备上似乎无法正常工作。这是我的HTML：

$(function() {
      // vars for clients list carousel
      // http://stackoverflow.com/questions/6759494/jquery-function-definition-in-a-carousel-script
      var $clientcarousel = $('#clients-list');
      var clients = $clientcarousel.children().length;
      var clientwidth = (clients * 220); // 140px width for each client item 
      $clientcarousel.css('width', clientwidth);

      var rotating = true;
      var clientspeed = 0;
      var seeclients = setInterval(rotateClients, clientspeed);

      $(document).on({
        mouseenter: function() {
          rotating = false; // turn off rotation when hovering
        },
        mouseleave: function() {
          rotating = true;
        }
      }, '#clients');

      function rotateClients() {
        if (rotating != false) {
          var $first = $('#clients-list li:first');
          $first.animate({
              'margin-left': '-220px'
            }, 2000, "linear", function() {
            {
              $first.remove().css({
                'margin-left': '0px'
              });
              $('#clients-list li:last').after($first);
            });
          }
        }
      });

#clients {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#clients .clients-wrap {
  display: block;
  width: 95%;
  margin: 0 auto;
  overflow: hidden;
}

#clients .clients-wrap ul {
  display: block;
  list-style: none;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}

#clients .clients-wrap ul li {
  display: block;
  float: left;
  position: relative;
  width: 220px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}

#clients .clients-wrap ul li img {
  vertical-align: middle;
  max-width: 100%;
  max-height: 100%;
  -webkit-transition: 0 linear left;
  -moz-transition: 0 linear left;
  transition: 0 linear left;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
  filter: alpha(opacity=65);
  opacity: 0.65;
}

#clients .clients-wrap ul li img:hover {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1.0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="/home/gngdeliv/wolfppr.donut.co.il/wp-admin/js/infiniteslidev2.js"></script>
<div id="clients">
  <div class="clients-wrap">
    <ul id="clients-list" class="clearfix">

      <script src="infiniteslidev2.js"></script>
      <ul class="demo">
        <li><img src="http://wolfppr.donut.co.il/wp-content/uploads/2018/07/2-1.jpg" alt=xerox "" /></li>
        <li><img src="http://wolfppr.donut.co.il/wp-content/uploads/2018/07/3-1.jpg" alt="Wizz" /></li>
        <li><img src="http://wolfppr.donut.co.il/wp-content/uploads/2018/07/4-1.jpg" alt="UPS" /></li>
        <li><img src="http://wolfppr.donut.co.il/wp-content/uploads/2018/07/5-1.jpg" alt="Babysitter" /></li>
        <li><img src="http://wolfppr.donut.co.il/wp-content/uploads/2018/07/6-3.jpg" alt="Snickers" /></li>
      </ul>
  </div>
</div>

我在做什么错了？

恒定运动图像轮播

0 个答案: