Javascript 幻灯片上的“上一步”按钮工作不正常

我需要帮助我的幻灯片上一个按钮。我的“下一步”按钮工作正常，但每次我按下“上一步”按钮时，它都会执行一种洗牌模式，并以随机顺序检索图片。如果有人能帮忙，那就太好了！我对JavaScript相当陌生，所以请耐心和清晰

HTML

<div class="container">
    <header>
        <nav class="clearfix">
            <div class="menu">
                <ul>
                    <li><a href="home.html">Home</a></li>
                    <li><a href="about.html">About</a></li>
                    <li><a href="slide.html">Before/After</a></li>
                    <li><a href="fac.html">Facilities</a></li>
                    <li><a href="contact.html">Contact</a></li>
                    <li><a href="staff.html">Staff</a></li>
                </ul>
            </div>

            <p id="menu">Menu</p>

            <div class="site-wrapper">
                <div class="header">
                    <a><div class="menu-trigger" title="Menu"></div></a>
                </div>
            </div>

            <script src="script.js" type="text/javascript"></script>
        </nav>

        <a href="home.html"><img src="img/logoBRB.png"/></a>

        <h1>Brad's Auto Body</h1>

        <p id="quote"><i>"Dedicated To Perfection"</i></p>
    </header>

    <section class="slideshow" id="slideshow">
        <figure>
            <img class="mySlides" src="img/corengine.jpg" width="100%">
        </figure>
        <figure>
            <img class="mySlides" src="img/corseat.jpg" width="100%">
        </figure>
        <figure>
            <img class="mySlides" src="img/blah.jpg" width="100%">
        </figure>
        <figure>
            <img class="mySlides" src="img/blah2.jpg" width="100%">
        </figure>
        <figure class="show">
            <img class="mySlides" src="img/cor.jpg" width="100%">
        </figure>

        <span class="prev">&laquo;</span> <span class="next">&raquo;</span>
    </section>

    <footer>
        <div class="social">
            <ul>
                <li>
                    <a href="https://www.facebook.com/Brads-Auto-Body-475978275798070/?fref=ts" target="_blank"><i class="fa fa-facebook fa-2x" id="fa"></i></a>
                </li>
            </ul>
        </div>

        <p>&copy;Copyright 2016. Brad’s Auto Body. All Rights Reserved.</p>

        <p>Web Design by<img class="logo" src="img/logoJJC.png">JJC Web Developers</p>
    </footer>

    <script src="slideshow.js"></script> 
    <script src="https://code.jquery.com/jquery-2.2.1.min.js" type="text/javascript"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js" type="text/javascript"></script> 
    <script src="https://github.com/mattbryson/TouchSwipe-Jquery-Plugin" type="text/javascript"></script>
</div>

CSS

#slideshow {
    background-color: solid transparent;
    padding: 0;
}

.slideshow {
    position: relative;
    display: block;
    overflow: hidden;
    height: 500px;
    width: auto;
}

.show {
    transition: opacity 2s;
    opacity: 1;
    position: relative;
    zoom: 110%;
}

.mySlides {
    height: 500px;
}

figure {
    transition: opacity 0;
    opacity: 0;
    position: absolute;
    margin: 0;
}

.next, .prev {
    color: #fff;
    position: absolute;
    background: rgba(0,0,0,.6);
    top: 50%;
    z-index: 1;
    font-size: 2em;
    margin-top: -.75em;
    opacity: .3;
    user-select: none;
}

.next:hover, .prev:hover {
    cursor: pointer;
    opacity: 1;
}

.next {
    right: 0;
    padding: 10px 5px 15px 10px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}

.prev {
    left: 0;
    padding: 10px 10px 15px 5px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}

---

我真的不知道你的滑块是如何使用模选择

图的。我建议您跟踪具有
show
类的
figure
元素，并在此基础上更改计数器

首先，加载Javascript时，应将
计数器
变量设置为具有
show
类的
图
的索引。这可以通过以下函数实现（或者直接将其添加到变量声明中）：

然后，通过对
计数器进行加法或减法，切换到下一个或上一个图像。不过，有两个例外：

当从最后一个图像转到第一个图像时，
计数器
值应更改为
0
同样地，从firt到last，
计数器
值应更改为
[图形元素数量]-1
最后一个
图形
元素的aka索引
这可以通过以下方式实现：

// Remove .show from whichever element currently has it and place it to
// figure that has index 'counter'
function showCurrent() {
    $items.removeClass('show');
    $items.eq(counter).addClass('show');
}

function showNext() {
    if (counter == numItems - 1) {
        counter = 0;
    } else {
        counter++;
    }

    showCurrent();
}

function showPrev() {
    if (counter == 0) {
        counter = numItems - 1;
    } else {
        counter--;
    }

    showCurrent();
}

// Add click events to prev & next buttons 
$('.next').on('click', function() {
    showNext();
});

$('.prev').on('click', function() {
    showPrev();
});

我从演示中删除了TouchWipe，因为它的实现似乎还没有完成

旁注：您似乎有两个版本的
jQuery
，2.2.1和2.1.3。考虑删除后者，并将所有的JS文件放置在<代码>正文标签的结尾处。这样，JS文件将最后加载。文件的顺序也很重要，应该是：

jQuery
jQueryUI
touchwipe
你自己的文件
我真的不知道你的滑块是如何使用模选择
图的。我建议您跟踪具有
show
类的
figure
元素，并在此基础上更改计数器

首先，加载Javascript时，应将
计数器
变量设置为具有
show
类的
图
的索引。这可以通过以下函数实现（或者直接将其添加到变量声明中）：

然后，通过对
计数器进行加法或减法，切换到下一个或上一个图像。不过，有两个例外：

当从最后一个图像转到第一个图像时，
计数器
值应更改为
0
同样地，从firt到last，
计数器
值应更改为
[图形元素数量]-1
最后一个
图形
元素的aka索引
这可以通过以下方式实现：

// Remove .show from whichever element currently has it and place it to
// figure that has index 'counter'
function showCurrent() {
    $items.removeClass('show');
    $items.eq(counter).addClass('show');
}

function showNext() {
    if (counter == numItems - 1) {
        counter = 0;
    } else {
        counter++;
    }

    showCurrent();
}

function showPrev() {
    if (counter == 0) {
        counter = numItems - 1;
    } else {
        counter--;
    }

    showCurrent();
}

// Add click events to prev & next buttons 
$('.next').on('click', function() {
    showNext();
});

$('.prev').on('click', function() {
    showPrev();
});

我从演示中删除了TouchWipe，因为它的实现似乎还没有完成

旁注：您似乎有两个版本的
jQuery
，2.2.1和2.1.3。考虑删除后者，并将所有的JS文件放置在<代码>正文标签的结尾处。这样，JS文件将最后加载。文件的顺序也很重要，应该是：

jQuery
jQueryUI
touchwipe
你自己的文件
我有一个疑问，这取决于我能否帮助你。疑问在于，当显示第一幅图像时，计数器的值为0或1。？基本上，您是将当前幻灯片的值保留在计数器变量中，还是将下一张幻灯片的值保留在计数器变量中？我对JavaScript相当陌生，所以我只使用了参考代码，但我相信它位于JavaScript第1行定义的0处@Ankushraghuvanshi如果你的计数器在项目列表中有当前图像的索引值，那么根据我的说法，下一个和上一个都不能正常工作。因为您的代码开始时计数器值为0，所以现在当您按下“下一步”时，它会从正在显示的div中删除show类，并将show类添加到项目列表中索引
value=Math.abs（计数器%numItems）
的元素中，即使单击“下一步”，在第一种情况下该元素也仅为0。只有在单击“下一步”两次后，才会显示第二个图像。这是发生在你的情况下吗？？？我有一个疑问，这取决于我可能或可能无法帮助你。疑问在于，当显示第一幅图像时，计数器的值为0或1。？基本上，您是将当前幻灯片的值保留在计数器变量中，还是将下一张幻灯片的值保留在计数器变量中？我对JavaScript相当陌生，所以我只使用了参考代码，但我相信它位于JavaScript第1行定义的0处@Ankushraghuvanshi如果你的计数器在项目列表中有当前图像的索引值，那么根据我的说法，下一个和上一个都不能正常工作。因为您的代码开始时计数器值为0，所以现在当您按下“下一步”时，它会从正在显示的div中删除show类，并将show类添加到项目列表中索引
value=Math.abs（计数器%numItems）
的元素中，即使单击“下一步”，在第一种情况下该元素也仅为0。只有在单击“下一步”两次后，才会显示第二个图像。这是你的情况吗？？？非常感谢@V-KopioThank非常感谢你@V-Kopio
// Remove .show from whichever element currently has it and place it to
// figure that has index 'counter'
function showCurrent() {
    $items.removeClass('show');
    $items.eq(counter).addClass('show');
}

function showNext() {
    if (counter == numItems - 1) {
        counter = 0;
    } else {
        counter++;
    }

    showCurrent();
}

function showPrev() {
    if (counter == 0) {
        counter = numItems - 1;
    } else {
        counter--;
    }

    showCurrent();
}

// Add click events to prev & next buttons 
$('.next').on('click', function() {
    showNext();
});

$('.prev').on('click', function() {
    showPrev();
});