Question

好吧，我被困住了。我需要在jQuery的滑块上实现动画。到目前为止，我已经完成了箭头（导航）功能，但无法弄清楚如何在单击“下一个”和“上一个”按钮后添加滑动效果（1、2秒）。有人知道吗？

$(document).ready(function() {
 $('.next').on('click', function() {
  var currentImg = $('.current');
  var nextImg = currentImg.next();

  if(nextImg.length == 0) {
   nextImg = $('.slider-secondary img').first();
  }

  currentImg.removeClass('current');
  nextImg.addClass('current');
 });

 $('.previous').on('click', function() {
  var currentImg = $('.current');
  var prevImg = currentImg.prev();

  if(prevImg.length == 0) {
   prevImg = $('.slider-secondary img').last();
  }

  currentImg.removeClass('current');
  prevImg.addClass('current');
 });
});

<div class="container">
    <div class="slider-primary">
      <img src="Assets/arrow-blue-left.png" class="previous" alt="Prev">
      <div class="slider-secondary">
        <img src="Assets/slider-image-1.jpg" class="current">
        <img src="Assets/slider-image-2.jpg">
        <img src="Assets/slider-image-3.jpg">
        <img src="Assets/slider-image-4.jpg">
        <img src="Assets/slider-image-5.jpg">
        <img src="Assets/slider-image-6.jpg">
        <img src="Assets/slider-image-7.jpg">
        <img src="Assets/slider-image-8.jpg">
        <img src="Assets/slider-image-9.jpg">
      </div>
      <img src="Assets/arrow-blue-right.png" class="next" alt="Next">
    </div>
  </div>

非常感谢您的帮助和参考。我很感激。 Slider不能是自动的，它只能在（必须）是图像/图标的箭头（导航）单击上使用。同样不允许使用任何现有的脚本，插件等。因此我在考虑并考虑了上述所有条件的情况下尝试实现一些其他逻辑。它实际上是代码测试的一部分。而且必须是在jQuery中，我的流动性显然不佳。

这也是css部分

*{
  margin: 0;
  padding: 0;
}

.container, .slider-primary{
	width:100%;
	margin:auto;
	overflow: hidden;
  position: relative;
}


.slider-secondary{
	width:100%;
	height:600px;
	position:relative;
	overflow:hidden;
	float:left;

}

.slider-secondary img{
	display:none;
	width:100%;
	height:100%;
}

.slider-secondary img.current{
	display:inline-block;
}

.previous, .next{
	float:left;
	cursor: pointer;
  position: absolute;
  top: 45%;
  width: 30px;
  height: 40px;
}

.previous{
	margin-left:35px;
	z-index:100;
}

.next{

	margin-left:-65px;
	z-index:100;
}

Answer 1

您可以使用jQuery animate()方法。 Here is the link to the documentation。

但是我建议对它使用任何jQuery轻量级库。

您可以参加Responsive and Flexible Mobile Touch Slider - Swiper

Demo of the same!

Answer 2

这里是一个工作示例。希望对您有帮助。有关完整的参考访问，请访问codepen

 $('.slider').each(function() {
      var $this = $(this);
      var $group = $this.find('.slide_group');
      var $slides = $this.find('.slide');
      var bulletArray = [];
      var currentIndex = 0;
      var timeout;

      function move(newIndex) {
        var animateLeft, slideLeft;

        advance();

        if ($group.is(':animated') || currentIndex === newIndex) {
          return;
        }

        bulletArray[currentIndex].removeClass('active');
        bulletArray[newIndex].addClass('active');

        if (newIndex > currentIndex) {
          slideLeft = '100%';
          animateLeft = '-100%';
        } else {
          slideLeft = '-100%';
          animateLeft = '100%';
        }

        $slides.eq(newIndex).css({
          display: 'block',
          left: slideLeft
        });
        $group.animate({
          left: animateLeft
        }, function() {
          $slides.eq(currentIndex).css({
            display: 'none'
          });
          $slides.eq(newIndex).css({
            left: 0
          });
          $group.css({
            left: 0
          });
          currentIndex = newIndex;
        });
      }

      function advance() {
        clearTimeout(timeout);
        timeout = setTimeout(function() {
          if (currentIndex < ($slides.length - 1)) {
            move(currentIndex + 1);
          } else {
            move(0);
          }
        }, 4000);
      }

      $('.next_btn').on('click', function() {
        if (currentIndex < ($slides.length - 1)) {
          move(currentIndex + 1);
        } else {
          move(0);
        }
      });

      $('.previous_btn').on('click', function() {
        if (currentIndex !== 0) {
          move(currentIndex - 1);
        } else {
          move(3);
        }
      });

      $.each($slides, function(index) {
        var $button = $('<a class="slide_btn">&bull;</a>');

        if (index === currentIndex) {
          $button.addClass('active');
        }
        $button.on('click', function() {
          move(index);
        }).appendTo('.slide_buttons');
        bulletArray.push($button);
      });

      advance();
    });

Answer 3

尝试以下方式。我为您创建了一个演示。

请找到以下代码：

HTML：

<h1>Incredibly Basic Slider</h1>
<div id="slider">
  <a href="#" class="control_next">></a>
  <a href="#" class="control_prev"><</a>
  <ul>
    <li>SLIDE 1</li>
    <li style="background: #aaa;">SLIDE 2</li>
    <li>SLIDE 3</li>
    <li style="background: #aaa;">SLIDE 4</li>
  </ul>  
</div>

<div class="slider_option">
  <input type="checkbox" id="checkbox">
  <label for="checkbox">Autoplay Slider</label>
</div>

Css：

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

html {
  border-top: 5px solid #fff;
  background: #58DDAF;
  color: #2a2a2a;
}

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

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

#slider {
  position: relative;
  overflow: hidden;
  margin: 20px auto 0 auto;
  border-radius: 4px;
}

#slider ul {
  position: relative;
  margin: 0;
  padding: 0;
  height: 200px;
  list-style: none;
}

#slider ul li {
  position: relative;
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  width: 500px;
  height: 300px;
  background: #ccc;
  text-align: center;
  line-height: 300px;
}

a.control_prev, a.control_next {
  position: absolute;
  top: 40%;
  z-index: 999;
  display: block;
  padding: 4% 3%;
  width: auto;
  height: auto;
  background: #2a2a2a;
  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;
}

a.control_prev {
  border-radius: 0 2px 2px 0;
}

a.control_next {
  right: 0;
  border-radius: 2px 0 0 2px;
}

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

Js：

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

  $('#checkbox').change(function(){
    setInterval(function () {
        moveRight();
    }, 3000);
  });

    var slideCount = $('#slider ul li').length;
    var slideWidth = $('#slider ul li').width();
    var slideHeight = $('#slider ul li').height();
    var sliderUlWidth = slideCount * slideWidth;

    $('#slider').css({ width: slideWidth, height: slideHeight });

    $('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });

    $('#slider ul li:last-child').prependTo('#slider ul');

    function moveLeft() {
        $('#slider ul').animate({
            left: + slideWidth
        }, 200, function () {
            $('#slider ul li:last-child').prependTo('#slider ul');
            $('#slider ul').css('left', '');
        });
    };

    function moveRight() {
        $('#slider ul').animate({
            left: - slideWidth
        }, 200, function () {
            $('#slider ul li:first-child').appendTo('#slider ul');
            $('#slider ul').css('left', '');
        });
    };

    $('a.control_prev').click(function () {
        moveLeft();
    });

    $('a.control_next').click(function () {
        moveRight();
    });

});

我希望这会对您有所帮助。让我知道您是否有任何疑问。

谢谢。

图像滑块-幻灯片动画-jQuery

3 个答案: