Jquery滑块上一个按钮答案

【问题标题】：Jquery slider previous buttonJquery滑块上一个按钮
【发布时间】：2016-07-17 01:14:33
【问题描述】：

此代码的问题在于上一个按钮。当用户在第一张幻灯片上按上一张时，会有一个空白滑块几秒钟，然后出现最后一张幻灯片。你知道如何让这个滑动动作流畅吗，谢谢阅读...

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> 
    <script src="/scripts/SliderControl.js"></script>
    <link href="/Styles/Sliders.css" rel="stylesheet" />
</head>
<body>
    <div class="container">
        <div class="header">
            <h1 class="text-muted">jQuery Basic Slider</h1>
        </div>
        <div id="slider">
            <ul class="slides">
                <li class="slide">
                    <img src="Images/Image1.jpg" alt="About Us" width="720" height="400" />
                </li>
                <li class="slide">
                    <img src="Images/Image2.jpg" alt="About Us" width="720" height="400" />
                </li>
                <li class="slide">
                    <img src="Images/Image3.jpg" alt="About Us" width="720" height="400" />
                </li>
                <li class="slide">
                    <img src="Images/Image4.jpg" alt="About Us" width="720" height="400" />
                </li>
                <li class="slide">
                    <img src="Images/Image6.jpg" alt="About Us" width="720" height="400" />
                </li>
                <li class="slide">
                    <img src="Images/Image1.jpg" alt="About Us" width="720" height="400" />
                </li>
            </ul>
        </div>

        <img id="Next" src="Images/RightArrow.png"
             class="img-responsive NextButton" />
        <img id="Previous" src="Images/LeftArrow.png"
             class="img-responsive PreButton" />
    </div>
</body>
</html>


#slider {
    width: 720px;
    height: 400px;
    overflow: hidden;
}

#slider .slides {
    display: block;
    width: 6000px;
    height: 400px;
    margin: 0;
    padding: 0;
}

#slider .slide {
    float: left;
    list-style-type: none;
    width: 720px;
    height: 400px;
}


#Next
{
    opacity: 0.4;
    filter: alpha(opacity=20);
}

    #Next:hover
    {
        cursor: pointer;
        opacity: 0.8;
        filter: alpha(opacity=80);
    }

#Previous
{
    opacity: 0.4;
    filter: alpha(opacity=20);
}

    #Previous:hover
    {
        cursor: pointer;
        opacity: 0.8;
        filter: alpha(opacity=80);
    }

#slider .NextButton
{
    position: absolute;
    top: 50%;
    right: 2%;
}

#slider .PreButton
{
    position: absolute;
    top: 50%;
    left: 2%;
}




'use strict';

$(function () {

    //settings for slider
    var width = 720;
    var animationSpeed = 1000;
    var pause = 3000;
    var currentSlide = 1;

    //cache DOM elements
    var $slider = $('#slider');
    var $slideContainer = $('.slides', $slider);
    var $slides = $('.slide', $slider);

    var interval;

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

    $slideContainer
        .on('mouseenter', pauseSlider)
        .on('mouseleave', startSlider);

    startSlider();

    $('#Next').click(function () {

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

    $('#Previous').click(function () {

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

                }
                }); 
            //}
        });


    $('#Next')
        .on('mouseenter', pauseSlider)
        .on('mouseleave', startSlider);

    $('#Previous')
        .on('mouseenter', pauseSlider)
        .on('mouseleave', startSlider);

});

【问题讨论】：

你的CSS代码不在<style>标签内吗？ Jquery 代码也不在<script> 标签内？
我一口气粘贴了所有代码。在实际情况下，css 和 javascript 分别位于两个不同的文件Sliders.css 和 Slidercontrol.js 中。代码可见性不是这里的问题。

标签： javascript jquery slider

【解决方案1】：

您的代码对于滑块来说有点混乱。我以一种简单易懂的方式为您简化了。我们可以只使用一种方法来移动滑块，并在上一个和下一个按钮中增加或减少 currentSlide 变量。

用下面的代码更新你的 js 代码。有任何问题，尽管问。 =)

'use strict';

$(function () {

    /**
     * Variables
     */
    var width = 720,
        animationSpeed = 600,
        pause = 3000, 
        currentSlide = 0,
        $slider = $('#slider'),
        $slideContainer = $('.slides', $slider),
        $slides = $('.slide', $slider),
        interval;

    /**
     * Methods
     */
    function changeSlider () {
        // verify the boundaries of slider
        if(currentSlide < 0) currentSlide = $slides.length - 1;
        if(currentSlide == $slides.length) currentSlide = 0;

        console.log(currentSlide);

        // animation using the currentSlide variable 
        $slideContainer.animate({ 
            'margin-left': -(currentSlide * width) 
        }, animationSpeed);
    }

    function startInterval() {
        interval = setInterval(function () {
            // increase the currentSlide in each interval dispatch
            currentSlide++;
            changeSlider();
        }, pause);
    }

    function pauseInterval() {
        clearInterval(interval);
    }

    /**
     * Mouse Events
     */
    $slideContainer
        .on('mouseenter', pauseInterval)
        .on('mouseleave', startInterval);

    $('#Next').click(function () {
        // next button, decrease
        currentSlide--;
        changeSlider();
    });

    $('#Previous').click(function () {
        // previous button, increase
        currentSlide++;
        changeSlider();
    });

    $('#Next')
        .on('mouseenter', pauseInterval)
        .on('mouseleave', startInterval);

    $('#Previous')
        .on('mouseenter', pauseInterval)
        .on('mouseleave', startInterval);

    /** 
     * Initialize Slider
     */
    changeSlider();
    startInterval();
});

【讨论】：

您的解决方案没有回答问题。前一个函数的功能应该与下一个函数相同。
抱歉，您尝试先制作动画并稍后验证位置和变量，因此，当您按下上一个按钮时，您会得到空白步骤。
你没有抓住重点。您的代码将显示所有图像，因为它会在按下第一张幻灯片上的上一个按钮时从第一张图像导航到最后一张图像。它应该从第一张图片滑到最后一张图片。