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

我真的不确定你的滑块是如何使用modulo选择figure。我建议您跟踪具有figure类的show元素，并根据该元素更改计数器。

首先，加载Javascript时，您应该将counter变量设置为figure类的show索引。这可以通过以下函数获得（或者只是将它添加到变量声明中）：

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

然后，通过在counter中添加或减去来更改为下一个或上一个图像。但是，有两个例外：

从最后图片转到第一个时，counter值应更改为0。
同样，从 firt 到 last ，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

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

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

jQuery
jQueryUI
TouchSwipe
您自己的文件

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

1 个答案:

Minimal JSFiddle demo