Question

我正在为jQuery（使用jQuery UI）制作图像滑块插件，但我遇到了问题。滑块工作正常，但是当再次调用第一个图像时，最后一个图像会立即滑过它。然后这个图像暂时可见，而在背景中它继续滑过所有图像。然后当它击中最后一张图像（仍然可见的图像）时，它会再次滑动到第一张图像，然后立即显示最后一张图像。

我尝试在JSFiddle中解释它，但是滑块没有出现。

JSFiddle

出于某种原因，每当我调用methods.getNextSlide（）;在methods.makeEndless（）之后;它似乎工作，虽然它跳过了第一张图片。我跳过第一张图片的任何其他方法似乎也有效。

这是用于滑动图像的代码：

(function($) {
var settings = {
    delay: 1000,            // Milliseconds the image is visible
    slideSpeed: 500,        // Time it takes to slide
    mode: "default",        // default, backAndForth
    auto: true,             // Automatic sliding
    direction: "right"      // Slide direction
}

var self,                   // this
    current = 1,            // Current slide
    lastSlide = 0,          // Last slide
    slideInterval = null    // Interval variable

var methods = {
    init: function() {
        lastSlide = $(self).find("img").length;
        $(self).find("img:first-child").show();
        if(settings.auto) {
            methods.start();
        }
    },

    /*
        Start the slideInterval
     */
    start: function() {
        slideInterval = setInterval(function() {
            methods.slide();
        }, settings.delay + settings.slideSpeed);
    },

    /*
        Hides current slide
        Checks if last slide has been reached
        if true:
            default: Set current back to starting slide
            backAndForth: when last slide has been reached,
                          flip sliding direction. Call next slide
        Else:
            Call Next slide
        Show next slide
     */
    slide: function() {
        methods.hideCurrentSlide();
        if(current == lastSlide) {
            switch(settings.mode) {
                case "default":
                    methods.makeEndless();
                    break;
                case "backAndForth":
                    methods.reverseDirection();
                    methods.getNextSlide();
                    break;
            }
        }
        else {
            methods.getNextSlide();
        }
        methods.showNextSlide();
    },

    /*
        Check if current slide is the last slide
     */
    isLastSlide: function() {
        if(settings.direction === "right" && current === lastSlide) {
            return true;
        }
        else if (settings.direction === "left" && current === 1) {
            return true;
        }
        else {
            return false;
        }
    },

    /*
        When at the last slide, continue with first slide
     */
    makeEndless: function() {
        if (settings.direction === "right") {
            current = 1;
        }
        else {
            current = lastSlide;
        }
    },

    /*
        Slide out currently visible slide
     */
    hideCurrentSlide: function() {

        if(settings.direction === "right") {
            $(self).find("img:nth-child("+current+")").hide("slide", {direction: "left"}, settings.slideSpeed);
        }
        else {
            $(self).find("img:nth-child("+current+")").hide("slide", {direction: "right"}, settings.slideSpeed);
        }

    },

    /*
        Slide in the current slide
     */
    showNextSlide: function() {
        if(settings.direction === "right") {
            $(self).find("img:nth-child("+current+")").show("slide", {direction: "right"}, settings.slideSpeed);
        }
        else {
            $(self).find("img:nth-child("+current+")").show("slide", {direction: "left"}, settings.slideSpeed);
        }

    },

    /*
        Get de index for the next slide
     */
    getNextSlide: function() {
        if(settings.direction === "right") {
            current++;
        }
        else {
            current--;
        }
        return current;
    }
}

$.fn.ImageSlider = function(options) {
    if(options) {
        settings = $.extend(settings, options);
    }
    self = this;
    methods.init();
    return this;
}

}（jQuery的））;

HTML看起来像这样：

<!DOCTYPE html>
<html>
<head>
    <title>Slider Plugin</title>
    <link rel="stylesheet" href="lib/css/main.css"/>
    <link rel="stylesheet" href="lib/css/jquery.slider.css"/>
</head>
<body>
<div id="wrapper">
    <div class="slider">
        <img src="lib/img/android.jpg" alt="Android.jpg" title="Android"/>
        <img src="lib/img/clouds.jpg" alt="Clouds.jpg" title="Clouds"/>
        <img src="lib/img/cube.jpg" alt="Cube.jpg" title="Cube"/>
        <img src="lib/img/cubes.jpg" alt="Cubes.jpg" title="Cubes"/>
    </div>
</div>
</body>
<script src="lib/js/jquery-1.9.1.js"></script>
<script src="lib/js/jquery_ui.js"></script>
<script src="lib/js/jquery.slider.js"></script>
<script src="lib/js/js.js"></script>
</html>

jQuery在第一张图片上滑动两次

0 个答案: