JQuery 循环上一个/下一个不起作用



我想使用JQuery循环创建一个幻灯片,观众可以通过单击图像按钮查看上一张或下一张幻灯片。

我使用从这里下载的javascript:http://jquery.malsup.com/cycle/int2.html

以下是我的 HTML 的样子:

<script type="text/javascript" src="js/jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#slide').cycle({ 
fx:     'fade', 
speed:  'fast', 
timeout: 0, 
next:   '#next', 
prev:   '#prev' 
});
</script>

并与幻灯片分开:

    <div id="slideshow-wrapper">
        <div id="slideshow-control">
            <a id="prev" href="#"><img src="images/prev.png" alt="Previous" /></a>
            <a id="next" href="#"><img src="images/next.png" alt="Next" /></a>
        </div>
        <div id="slide">
            <img src="images/banner/banner01.jpg" alt=" " />
            <img src="images/banner/banner02.jpg" alt=" " />
            <img src="images/banner/banner03.jpg" alt=" " />
        </div>
    </div><!--#slideshow-wrapper end-->

看到了关于此事的其他帖子,我尝试了建议的解决方案; 但是我仍然无法让幻灯片工作。因为我对 JavaScript 了解不多,所以我非常确定我只是错过了一些东西和/或复制了错误的东西。

如果有人能看看这里出了什么问题,我将不胜感激。

您没有使用正确数量的大括号/括号来关闭脚本:

$(document).ready(function()
{
  $('#slide').cycle({ 
                      fx:     'fade', 
                      speed:  'fast', 
                      timeout: 0, 
                      next:   '#next', 
                      prev:   '#prev' 
                    }
                   ); //end of #slide.cycle
}); //end of doc-ready

另外,请确保您的下一个和上一个 ID 不会再次出现。

Ctr+F 在开发人员工具的"元素"选项卡中,然后搜索"上一页"或"下一页"。

最新更新