如何向幻灯片添加下一个和上一个控件

How to add next and prev controls to a slideshow

本文关键字：上一个 控件 下一个 添加 幻灯片      更新时间：2023-09-26

总的来说，我对编码还是比较陌生的。我需要创建一个滑块与控件，但我有问题编写下一个和上一个按钮的脚本。我一点也不懂。

 $(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>

感谢所有的帮助，谢谢!

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

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;
                            });
                        }
                );
            });
.active {
                color: red;
            }
<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>

相关文章：