Javascript 图像滑块：返回图像

所以我学习了一个关于如何使用jquery创建图像滑块的教程，但他没有说明如何添加下一个图像和上一个图像，所以我自己也在尝试。下一个图像部分正在工作，但我无法使上一个图像工作

//滑块
var sliderWidth=960；
var滑块速度=1000；
var sliderPause=5000；
无功滑动电流=1；
var滑动区间；
变量$sliderLocation=$（“.slider”）；
var$sliderContainer=$sliderLocation.find（“.slides”）；
var$sliderSlides=$sliderContainer.find（“.slide”）；
//img滑块
函数startSlider（）{
sliderInterval=setInterval（函数（）{
$sliderContainer.animate（{'margin-left'：'-='+sliderWidth}，sliderSpeed，function（）{
滑动电流++；
如果（sliderCurrent==$sliderSlides.length）{
滑动电流=1；
$sliderContainer.css（“左边距”，0）；
}
});
}，滑座）；
}
函数pauseSlider（）{
clearInterval（sliderInterval）；
}
函数倒退（）{
$sliderContainer.animate（{“左边距”：“+=”+sliderWidth}，sliderSpeed，function（）{
滑动电流--；
如果（sliderCurrent==$sliderSlides.length）{
sliderCurrent=$sliderSlides.length-1；
$sliderContainer.css（“左边距“，”-1920”）；
}
});
}
函数nextSlider（）{
$sliderContainer.animate（{“左边距”：“-=”+sliderWidth}，sliderSpeed，function（）{
滑动电流++；
如果（sliderCurrent==$sliderSlides.length）{
滑动电流=1；
$sliderContainer.css（“左边距”，0）；
}
});
}
$（“#slidercontrolsleft”）。打开（“单击”，函数（）{
倒退（）；
控制台日志（“左”）；
});
$（“#SliderController使用”）。在（“单击”，函数（）上）{
pauseSlider（）；
控制台日志（“暂停”）；
});
$（#sliderControllsStart”）。在（“单击”，函数（）上{
startSlider（）；
控制台日志（“启动”）；
});
$（“#SliderControl右侧”）。在（“单击”，函数（）上）{
nextSlider（）；
控制台日志（“右”）；
});
startSlider（）；









第1节滑块{
宽度：100%；
高度：500px；
溢出：隐藏；
利润率：100px0；
}
section.slider.幻灯片{
显示：块；
宽度：6000px；
高度：400px；
保证金：0；
填充：0；
}
节.滑块.滑块{
宽度：960px；
高度：400px；
浮动：左；
列表样式类型：无；
}
滑块控制器{
列表样式类型：无；
}
滑动控制器{
显示：内联块；
字体大小：60px；
颜色：#000；
文字装饰：无；
填充：0 10px 0 10px；
}

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

---

在使用jQuery速记

$

之前，需要先声明它。我添加了一个包装函数来实现这一点。在JS上（至少在fiddle上），没有包含滑块变量——我添加了这些变量

很抱歉，忘记更新小提琴链接了，我已经修复了。你的链接不工作，它是一个404错误。

    //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;
}