javascript - 幻灯片上的上一个按钮无法正常工作

Question

我需要有关幻灯片上一个按钮的帮助。我的下一个按钮工作得很好，但每次我按上一个按钮时，它都会执行一种随机播放模式并以随机顺序检索图片。如果有人可以帮忙那就太好了!我对 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>

JavaScript

var counter = 0, // to keep track of current slide
    $items = $('.slideshow figure'), // a collection of all of the slides, caching for performance
    numItems = $items.length; // total number of slides

// this function is what cycles the slides, showing the next or previous slide and hiding all the others
var showCurrent = function() {
    var itemToShow = Math.abs(counter % numItems); // uses remainder (aka modulo) operator to get the actual index of the element to show  
    $items.removeClass('show'); // remove .show from whichever element currently has it
    $items.eq(itemToShow).addClass('show');
};

// add click events to prev & next buttons 
$('.next').on('click', function() {
    showCurrent();
    counter++;
});

$('.prev').on('click', function() {
    showCurrent();
    counter--;
});

// if touch events are supported then add swipe interactions using TouchSwipe https://github.com/mattbryson/TouchSwipe-Jquery-Plugin
var $el = $('#slideshow');
$el.slideshow({
    duration: 400,
    delay: 3000,
    selector: '> img',
    transition: 'push(up)',
    autoPlay: true,
    show: function(params) {
        var nextIndex = params.next.index;
        if (nextIndex > 2) {
            // do something awesome when the slide is after the third slide.
        }
    },
    complete: function(params) {
        // do something awesome when a transition finishes
    }
});

// get the slideshow object if you want it
var slideshow = $el.data('slideshow');

// show the third slide
$el.slideshow('show', 2); // Element API
slideshow.show(2); // object API
// show the next slide
slideshow.show('next');
// pause and play
slideshow.stop();
slideshow.play();

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

Answer 1

我真的不确定你的 slider 如何通过选择figure来工作使用模。我建议您跟踪 figure具有 show 的元素类并据此更改计数器。

首先，当加载Javascript时，您应该设置counter变量到 figure 的索引其中有 show类(class)。这可以通过以下函数来实现(或者直接将其添加到变量声明中):

function getShowIndex() {
    return $('#slideshow figure').index($('.show'));
}

然后，通过在 counter 中添加或减去来更改为下一个或上一个图像。 。不过，有两个异常(exception):

1. 从最后图像转到第一个图像时，counter值应更改为 0 .
2. 同样，从第一个到最后counter值应更改为 [ammount of figure elements] - 1又名最后一个索引 figure元素。

这可以通过这样的方法来实现:

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

Minimal JSFiddle demo

I removed TouchSwipe from the demo as its implementation didn't seem to be finished.

旁注:您似乎有两个版本的 jQuery 、2.2.1 和 2.1.3。考虑删除后者并将所有 JS 文件放在 body 的末尾标签。这样JS文件是最后加载的。文件的顺序也很重要，应该是:

1. jQuery
2. jQueryUI
3. TouchSwipe
4. 您自己的文件