Javascript动画不滑动

Question

我正在调整codepen中的滑块，现在animate函数不想实际进行滑动。它确实移动了每张幻灯片，但没有滑动。我似乎无法弄清问题是什么。这是codepen https://codepen.io/theMugician/pen/VxKgBY

function moveLeft() {
        $('.slider__slider-list').animate({
            left: + slideWidth
        }, 200, function () {
            $('.slider-list__item:last-child').prependTo('.slider__slider-list');
            $('.slider__slider-list').css('left', '');
        });
    };

    function moveRight() {
        $('.slider__slider-list').animate({
            left: - slideWidth
        }, 200, function () {
            $('.slider-list__item:first-child').appendTo('.slider__slider-list');
            $('.slider__slider-list').css('left', '');
        });
    };

Answer 1

我不是很擅长javascript，但是在上面的代码中你没有调用或调用任何一个函数。或者，我猜测200是一个按钮/引用的代码，这就是移动它尝试将函数的名称放在其中的任何一个}，200，function（）{在函数之后....

它看起来像你链接到一个名为.animate的类，但在CodePen Css中没有名为.animate的类

希望这有帮助，但可能不是一个很好的答案

你也取出了点击功能（）

$('.slider__control--prev').click(function () {
    moveLeft();
});

$('.slider__control--next').click(function () {
    moveRight();

Answer 2

您可以添加“开始”幻灯片计数var以检测实际幻灯片的内容。你可以执行一个循环滑块。请试试以下。你可以根据自己的需要调整它。

jQuery(document).ready(function ($) {

  $('#checkbox').change(function(){
    setInterval(function () {
        moveRight();
    }, 3000);
  });
  
	var slideCount = $('.slider-list__item').length;
  var slideStart = 0;
	var slideWidth = $('.slider-list__item').width();
	var slideHeight = $('.slider-list__item').height();
	var sliderUlWidth = slideCount * slideWidth;
	
	$('.slider__container').css({ width: slideWidth, height: slideHeight });
	
	$('.slider__slider-list').css({ width: sliderUlWidth });
	
    $('.slider-list__item:last-child').prependTo('.slider__slider-list');

    function moveLeft() {
        slideStart--
        if(slideStart<0){
            slideStart = slideCount-1
         }
        $('.slider-list__item').animate({
            left: -(slideStart*slideWidth)
        }, 200, function () {
        
        });
        
    };

    function moveRight() {
       slideStart++

       if(slideStart>=slideCount){
          slideStart = 0
       }
        $('.slider-list__item').animate({
            left:  -(slideStart*slideWidth)
        }, 200, function () {
        });
        
    };

    $('.slider__control--prev').click(function () {
        moveLeft();
    });

    $('.slider__control--next').click(function () {
        moveRight();
    });

});

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600);	

html {
  border-top: 5px solid #fff;
  background: #000;
  color: #000;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Open Sans';
}

h1 {
  color: #fff;
  font-weight: 300;
}

.slider {
  position: relative;
  width: 600px;
  margin: 0 auto;
}

.slider__container {
  position: relative;
  overflow: hidden;
  margin: 20px auto 0 auto;
  border: 2px solid #fff;
}

.slider-list {
  position: relative;
  margin: 10px;
  margin-bottom: 10px;
  padding: 0;
  height: 200px;
  list-style: none;
}

.slider-list__item {
  position: relative;
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  width: 600px;
  height: 300px;
  background: #000;
  color: #fff;
  text-align: left;
}

.slider-list__item p {
  margin: 0 50px;
}

.slider-list__item h1 {
  margin: 20px 50px 0;
}

.slider__control--next, .slider__control--prev {
  position: absolute;
  top: 40%;
  z-index: 999;
  display: block;
  padding: 4% 3%;
  width: auto;
  height: auto;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 18px;
  opacity: 0.8;
  cursor: pointer;
}

a.control_prev:hover, a.control_next:hover {
  opacity: 1;
  -webkit-transition: all 0.2s ease;
}

.slider__control--prev {
  left: -80px;
  border-radius: 0 2px 2px 0;
}

.slider__control--next {
  right: -80px;
  border-radius: 2px 0 0 2px;
}

.slider_option {
  position: relative;
  margin: 10px auto;
  width: 160px;
  font-size: 18px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider">
 <a href="#" class="slider__control--next">></a>
 <a href="#" class="slider__control--prev"><</a>
<div class="slider__container">
  
  <ul class='slider__slider-list'>
    <li class='slider-list__item' style="background: #333;">
      <h1>SLIDE 1</h1>
      <p>Vestibulum eget vestibulum sapien. Quisque in rhoncus mi, vel posuere libero. Proin blandit placerat nibh, sit amet sodales ex egestas vitae. Maecenas ultrices velit sodales ipsum tristique, eu ornare tortor aliquet. Ut ultrices enim dolor, eu scelerisque elit mattis non. Etiam efficitur nec enim vitae aliquam. Praesent congue metus lorem, sed porttitor nisi tempus tristique.</p>
    </li>
    <li class='slider-list__item'>
      <h1>SLIDE 2</h1>
      <p>Vestibulum eget vestibulum sapien. Quisque in rhoncus mi, vel posuere libero. Proin blandit placerat nibh, sit amet sodales ex egestas vitae. Maecenas ultrices velit sodales ipsum tristique, eu ornare tortor aliquet. Ut ultrices enim dolor, eu scelerisque elit mattis non. Etiam efficitur nec enim vitae aliquam. Praesent congue metus lorem, sed porttitor nisi tempus tristique.</p>
    </li>
    <li class='slider-list__item'>
      <h1>SLIDE 3</h1>
      <p>Vestibulum eget vestibulum sapien. Quisque in rhoncus mi, vel posuere libero. Proin blandit placerat nibh, sit amet sodales ex egestas vitae. Maecenas ultrices velit sodales ipsum tristique, eu ornare tortor aliquet. Ut ultrices enim dolor, eu scelerisque elit mattis non. Etiam efficitur nec enim vitae aliquam. Praesent congue metus lorem, sed porttitor nisi tempus tristique.</p>
    </li>
  </ul>  
</div>
</div>
<div class="slider_option">
  <input type="checkbox" id="checkbox">
  <label for="checkbox">Autoplay Slider</label>
</div>

Answer 3

这是一个简单的问题。我忘了在CSS中输入正确的类名。我有.slider-list但它应该是.slider__slider-list。所以这与Javascript动画无关。