Question

我想使用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知之甚少，所以我更确信我错过了什么和/或复制了错误。

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

Answer 1

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

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

Answer 2

此外，请确保您的下一个和上一个ID不会再出现。

Ctr + F在开发人员工具“元素”标签中搜索“prev”或“next”。

JQuery Cycle Prev / Next无效

2 个答案: