Question

我想实现简单的滑块。

问题是，如果有两个以上的幻灯片，它将正常工作。但如果有两张幻灯片，则会导致问题。

如果有两个幻灯片，我们点击上一个箭头然后它会正常工作，但是当我们点击下一个箭头时，图像会在一段时间后显得不太好。

我希望通过点击下一个箭头来实现相同的功能，因为它适用于上一个箭头。

HTML：

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

CSS：

#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;
}

JS：

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

    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();
    });

});

请帮帮我。提前谢谢

Answer 1

Demo

将moveRight功能更改为

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

Answer 2

你在这里得到的不同之处是：

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', '');
    });
};

您可以删除“左”选项中的“+”和“ - ”。它有所不同

Answer 3

我不明白为什么代码会以这种方式运行，但是如果您考虑放置两张以上的幻灯片，添加一张幻灯片似乎可以解决这个问题：http://jsfiddle.net/ek9bs/

HTML：

<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 style="background: #ggg;">SLIDE 3</li>

</ul>  
</div>

当然，如果您提供的两张幻灯片只是示例，并且您想要添加更多幻灯片。

使用jquery的简单滑块

3 个答案: