Question

所以我遵循了如何使用jquery创建图像滑块的教程，但他没有展示如何添加下一个图像和上一个图像，所以我正在努力做到这一点。下一个图像部分正在工作，但我无法使之前的图像工作。 https://jsfiddle.net/vmab7xk6/10/

    //slider
        var sliderWidth = 960;
        var sliderSpeed = 1000;
        var sliderPause = 5000;
        var sliderCurrent = 1;
        var sliderInterval;

        var $sliderLocation = $(".slider");
        var $sliderContainer = $sliderLocation.find(".slides");
        var $sliderSlides = $sliderContainer.find(".slide");

    // img slider
        function startSlider() {
            sliderInterval = setInterval(function() {
                $sliderContainer.animate({'margin-left': '-='+sliderWidth}, sliderSpeed, function() {
                    sliderCurrent++;
                    if(sliderCurrent === $sliderSlides.length) {
                        sliderCurrent = 1;
                        $sliderContainer.css("margin-left", 0);
                    }
                });
            }, sliderPause);
        }

        function pauseSlider() {
            clearInterval(sliderInterval);
        }

        function backSlider() {
            $sliderContainer.animate({"margin-left": "+="+sliderWidth}, sliderSpeed, function() {
                sliderCurrent--;
                if(sliderCurrent === $sliderSlides.length) {
                    sliderCurrent = $sliderSlides.length - 1;
                    $sliderContainer.css("margin-left", "-1920");
                }

            });
        }

        function nextSlider() {
            $sliderContainer.animate({"margin-left": "-="+sliderWidth}, sliderSpeed, function() {
                sliderCurrent++;
                if(sliderCurrent === $sliderSlides.length) {
                        sliderCurrent = 1;
                        $sliderContainer.css("margin-left", 0);
                }
            });
        }

        $("#sliderControllsLeft").on("click", function() {
            backSlider();
            console.log("left");
        });

        $("#sliderControllsPause").on("click", function() {
            pauseSlider();
            console.log("pause");
        });

        $("#sliderControllsStart").on("click", function() {
            startSlider();
            console.log("start");
        });

        $("#sliderControllsRight").on("click", function() {
            nextSlider();
            console.log("right");
        });

        startSlider();

<section class="slider">
            <ul class="slides">
                <li class="slide"><img src="img/slider_01.jpg"></li>
                <li class="slide"><img src="img/slider_02.jpg"></li>
                <li class="slide"><img src="img/slider_03.jpg"></li>
                <li class="slide"><img src="img/slider_01.jpg"></li>
            </ul>
            <ul class="sliderControlls">
                <li id="sliderControllsLeft"><</li>
                <li id="sliderControllsPause">=</li>
                <li id="sliderControllsStart">+</li>
                <li id="sliderControllsRight">></li>
            </ul>
        </section>

section.slider {
    width: 100%;
    height: 500px;
    overflow: hidden;
    margin: 100px 0;
}

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

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

ul.sliderControlls {
    list-style-type: none;
}

ul.sliderControlls li {
    display: inline-block;
    font-size: 60px;
    color: #000;
    text-decoration: none;
    padding: 0 10px 0 10px;
}

Answer 1

您有一些语法错误。请参阅更新的小提琴：jsfiddle

在使用之前，您需要声明jQuery简写$。我添加了一个包装函数来做到这一点。在你的JS上，（至少在小提琴上），你没有包含滑块变量 - 我添加了这些变量。

图像滑块：返回图像

1 个答案: