Question

此代码的问题出在上一个按钮上。当用户按下第一张幻灯片上的上一个时，会有一个空白滑块几秒钟，然后出现最后一张幻灯片。您是否知道如何使这个幻灯片动作顺利，感谢阅读...

<!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);

});

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

Jquery滑块上一个按钮

1 个答案: