使用javaScript滑块控制CSS页边距

我对JS和Jquery很新颖。我创建了一个简单的图像传送带，可以减少图像的左边距，以便下一个可以滑入。使用javaScript滑块控制CSS页边距

我想用滑块控制图像传送带。我认为最好的方法是用JS滑块控制CSS左边距的大小。就像我说的我是初学者，所以我很难找出一个解决方案来定位左边距值，并用滑块正向或反向更新它。

ex 移动滑块左左边距减少移动滑块左右边距增大。任何帮助将不胜感激。

非常感谢你的帮助。

我会包括我对图像旋转木马的代码。

// 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>

来源

2017-07-31 Tayler Ramsay

您可以使用您的滑块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。

来源

2017-08-01 02:00:24 cjl750

使用javaScript滑块控制CSS页边距

回答

相关问题