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

Question

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

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 脚本都在调用相同的函数。任何人都可以帮忙吗？

标签： slideshow

Answer 1

添加两个指向 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();
});