Question

我是JS和Jquery的新手。我创建了一个简单的图像轮播，减少了图像的左边距，以便下一个图像滑入。

我想用滑块控制图像轮播。我认为最好的方法是使用JS滑块控制css中左边距的大小。就像我说我是初学者一样，所以我无法找到一个解决方案来定位左边距值并使用滑块正向或负向更新它。

离移动滑块左左边距减少移动滑块右左边距增长。任何帮助都会非常感激。

非常感谢你的帮助。

我将包含我对图像轮播的代码。

// image slider////////////////////////

$(function(){
 // config
  var width = 720;
  var animationSpeed = 1000;
  var pause = 3000;
  var currentSlide = 1;

  //cache DOM

  var $slider = $('#slider');
  var $sliderContainer = $slider.find('.slides');
  var $slides = $sliderContainer.find('.slide');

  var interval;



  function startSlider(){
    interval = setInterval(function(){
      $sliderContainer.animate({'margin-left': '-=' + width}, animationSpeed, function(){
        currentSlide++;
        if (currentSlide === $slides.length){
            currentSlide = 1;
            $sliderContainer.css('margin-left', 0);
        }
      });
    }, pause);
  }

  function stopSlider(){
    clearInterval(interval);
  }

  $('#slider').on('mouseenter' , stopSlider).on('mouseleave', startSlider);

startSlider();

});



<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="./public/assets/css/main.css">
    <meta charset="utf-8">
    <title>starter_build</title>
  </head>
  <body>

    <div id = "slider">
      <ul class="slides">
        <li class="slide"><img src="public/assets/images/1.jpg" alt=""></li>
        <li class="slide"><img src="public/assets/images/2.jpg" alt=""></li>
        <li class="slide"><img src="public/assets/images/3.jpg" alt=""></li>
        <li class="slide"><img src="public/assets/images/4.jpg" alt=""></li>
        <li class="slide"><img src="public/assets/images/5.jpg" alt=""></li>
        <li class="slide"><img src="public/assets/images/6.jpg" alt=""></li>
        <li class="slide"><img src="public/assets/images/1.jpg" alt=""></li>
      </ul>
    </div>



    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="./public/assets/js/scripts.js"></script>
    </script>
  </body>
</html>

Answer 1

您可以使用range input作为滑块，并在用户更新时获取其值。然后将该值用于滑块上的左边距。下面是获取范围输入值并使用它来提供可以在.css()语句中使用的字符串的示例：

$(function(){
  $('input').on('change', function(){
    $('#current-margin').find('span').text($(this).val() + 'px');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="range" min="0" max="5040" step="720" value="0">

<p id="current-margin">Current margin: <span>0</span></p>

您可以使用类似的内容（即$('input').val() + 'px'）在输入更改时更新width变量。

但您还必须处理诸如清除超时以重启计时器以及根据输入值更新currentSlide之类的事情。

使用javaScript滑块控制CSS边距

1 个答案: