将下一个和上一个链接添加到自动幻灯片放映

问题描述

我已将以下自动幻灯片合并到我正在开发的网页中...

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow_auto

...但希望能够手动移动到下一张幻灯片或返回，如下所示...

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow

W3schools 提供两种类型的幻灯片（手动和自动），但不提供手动和自动功能相结合的幻灯片。我已经尝试将一个的 CSS 和 JS 合并到另一个中，但无法让它工作 - 大概是因为两个 JS 脚本都调用了相同的函数。有人可以帮忙吗？

解决方法

向 HTML 添加两个链接：

   <a id="prev" href="#" >Prev</a>  
   <a id="next" href="#" >Next</a>   

JS：

$("#next").click(function(){
    $('#slideshow > div:first-child')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
});

$("#prev").click(function(){
    $('#slideshow > div:first-child')
    .fadeOut(1000)
     $('#slideshow > div:last-child')
    .prependTo('#slideshow') 
    .fadeOut();
    $('#slideshow > div:first-child').fadeIn();
});