Question

我努力解决这个问题，并且最终只剩下一个问题了。当向左走时，试图走到第一张幻灯片后面应该带你到最后一张。它在这里所做的一切，都在继续回归，深入到虚无之中。您可以在此处查看当前版本：http://ice-trance.tk。

JavaScript的：

$(function() {

var width = 720;
var animationSpeed = 838;
var pause = 5900;
var currentSlide = 1;

var $slider = $('#slide');
var $slideContainer = $slider.find('.slides');
var $slides = $slideContainer.find('.slide');
var $left = $slider.find('#prevSlide');
var $right = $slider.find('#nextSlide');

var interval;

function startSlider(){
interval = setInterval(function() {
    $slideContainer.animate({'margin-left': '-='+width}, animationSpeed, function() {
        currentSlide++;
        if (currentSlide === $slides.length) {
        currentSlide = 1;
        $slideContainer.css('margin-left', 0);
        }
    });
}, pause);
};

$slider.on('mouseenter', function() {
$('.slide-ctrl').delay(42).fadeIn(130);})
.on('mouseleave', function() {
$('.slide-ctrl').delay(240).fadeOut(514);});


$left.click(function() {
    $slideContainer.animate({'margin-left': '+='+width}, animationSpeed, function () {
      // the problem
        currentSlide++;
        if (currentSlide == -1) {
        currentSlide = $slides.length;
        $slideContainer.css('margin-left', $slides.lenght);
        }
    });
});

$right.click(function() {
    $slideContainer.animate({'margin-left': '-='+width}, animationSpeed, function() {
        currentSlide++;
        if (currentSlide === $slides.length) {
        currentSlide = 1;
        $slideContainer.css('margin-left', 0);
        }
    });
});

function stopSlider() {
clearInterval(interval);
};

$slider.on('mouseenter', stopSlider).on('mouseleave', startSlider);
('.slide_content').on('mouseenter', stopSlider).on('mouseleave', startSlider);

startSlider();

});

HTML：

<div id="slide">
<div class="slide-ctrl" id="prevSlide"><</div>
<div class="slide-ctrl" id="nextSlide">></div>
<ul class="slides">
<li class="slide"><div class="slideImg slide1">
    <div class="slide_content">
    <div id="slide_contentBG"></div>
    <h3>slide 1</h3>
    </div></div></li>
<li class="slide"><div class="slideImg slide2">
    <div class="slide_content">
    <div id="slide_contentBG"></div>
    <h3>slide 2</h3>
    </div></div></li>
<li class="slide"><div class="slideImg slide3">
    <div class="slide_content">
    <div id="slide_contentBG"></div>
    <h3>slide 3</h3>
    </div></div></li>
<li class="slide"><div class="slideImg slide4">
    <div class="slide_content">
    <div id="slide_contentBG"></div>
    <h3>slide 4</h3>
    </div></div></li>
<li class="slide"><div class="slideImg slide5">
    <div class="slide_content">
    <div id="slide_contentBG"></div>
    <h3>slide 5</h3>
    </div></div></li>
<li class="slide"><div class="slideImg slide1">
    <div class="slide_content">
    <div id="slide_contentBG"></div>
    <h3>slide 1.2</h3>
    </div></div></li>
</ul>
</div>

Answer 1

你的css语句中有语法错误

$slideContainer.animate({'margin-left': '+='+width}, animationSpeed, function () {
  // the problem
    currentSlide++;
    if (currentSlide == -1) {
    currentSlide = $slides.length;
    $slideContainer.css('margin-left', $slides.lenght); //This should be $slides.length not lenght
    }
});

另外你的slideNumbering似乎有点奇怪。我没有详细介绍，但是当点击左键时增加currentSlide索引对我来说似乎很直观。

我希望

currentSlide--

否则你的if语句永远不会是真的

我认为如果你的第一个索引是1，语句会检查0;

    if (currentSlide == 0)

我的最后一句话是，你不会在这里顺利过渡。完成动画后，您将首先看到一张空幻灯片作为唯一检查幻灯片索引的内容。因此，在开始动画之前，我会移动这个逻辑。

滑块左键

1 个答案: