如何将下一个和上一个控件添加到幻灯片中

Question

我对编码总体上仍然相对较新。我需要创建一个带控件的滑块，但是我在编写下一个和上一个按钮的脚本时遇到了问题。我几乎一无所知。

 $(function () {
	$('#slideshow .show').hide(); // hide all slides
		  $('#slideshow .show:first-child').show(); // show first slide
		  setInterval(function () {
			$('#slideshow .show:first-child').fadeOut(0)
			.next('.show').fadeIn(1500)
			.end().appendTo('#slideshow');
		  },
	8500); // slide duration
	
	$(".control_next").click(
		//Not sure what to write here for the slider to fade to next slider
	);
	
	$(".control_prev").click(
		//Not sure what to write here for the slider to fade to previous slider
    );
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slideshow">
    <div class="show">
        <div class="slidertext">
            <span style="color:#007E5C; font-weight:800;">hello</span>
            <p>Lorem Ipsum</p>
        </div>
        <div class="textbg"></div>
        <figure class="fixedratio"></figure>
    </div>
    
    <div class="show">
        <div class="slidertext">
            <span style="color:#007E5C; font-weight:800;">hello</span>
            <p>Lorem Ipsum</p>
        </div>
        <div class="textbg2"></div>
        <figure class="fixedratio2"></figure>
    </div>
    
    <div class="show">
        <div class="slidertext">
            <span style="color:#007E5C; font-weight:800;">hello</span>
            <p>Lorem Ipsum</p>
        </div>
        <div class="textbg3"></div>
        <figure class="fixedratio3"></figure>
    </div>
    </div>

<a href="#" class="control_next">></a>
<a href="#" class="control_prev"><</a>

感谢所有帮助，谢谢！

Answer 1

我已为下一个和上一个按钮编写代码，请检查它。下一个按钮的代码非常简单。但是显示前一个元素的代码有点棘手。

＆＃13;

＆＃13;

var slideUpdating = false;
            $(function () {
                $('#slideshow .show').hide(); // hide all slides
                $('#slideshow .show:first-child').show(); // show first slide
                setInterval(
                        function ()
                        {
                            if (slideUpdating) {
                                return;
                            }
                            $('#slideshow .show:first-child')
                                    .fadeOut(0)
                                    .next('.show').fadeIn(1500)
                                    .end().appendTo('#slideshow');
                        },
                        8500
                        ); // slide duration

                $(".control_next").click(
                        function () {
                            if(slideUpdating)
                                return;
                            slideUpdating = true;
                            $('#slideshow .show:first-child')
                                    .fadeOut(0)
                                    .next('.show').fadeIn(1500, function () {
                                slideUpdating = false;
                            })
                                    .end().appendTo('#slideshow');
                        });

                $(".control_prev").click(
                        function () {
                            if(slideUpdating)
                                return;
                            slideUpdating = true;
                            $('#slideshow .show:first-child')
                                    .fadeOut(0)
                                    .siblings(':last').fadeIn(1500, function () {
                                $("#slideshow .show:visible").prependTo("#slideshow");
                                slideUpdating = false;
                            });
                        }
                );
            });

＆＃13;

.active {
                color: red;
            }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <div id="slideshow">
            <div class="show">
                <div class="slidertext">
                    <span style="color:#007E5C; font-weight:800;">hello</span>
                    <p>Lorem Ipsum1</p>
                </div>
                <div class="textbg"></div>
                <figure class="fixedratio"></figure>
            </div>

            <div class="show">
                <div class="slidertext">
                    <span style="color:#007E5C; font-weight:800;">hello</span>
                    <p>Lorem Ipsum2</p>
                </div>
                <div class="textbg2"></div>
                <figure class="fixedratio2"></figure>
            </div>

            <div class="show">
                <div class="slidertext">
                    <span style="color:#007E5C; font-weight:800;">hello</span>
                    <p>Lorem Ipsum3</p>
                </div>
                <div class="textbg3"></div>
                <figure class="fixedratio3"></figure>
            </div>
        </div>

        <a href="#" class="control_next">></a>
        <a href="#" class="control_prev"><</a>

＆＃13;

＆＃13;

＆＃13;