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动画无关。

Javascript动画不滑动

3 个答案: