Question

请帮我运行幻灯片循环

这是我使用的jQuery代码

$(document).ready(function() {
    $(document).ready(function() {
        $('#slider').cycle({
            fx: 'fade' 
            // choose your transition type, ex: fade, scrollUp, shuffle, etc...
        });
    });

这是我链接插件的方式

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Homepage</title>
    **<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.cycle.all.js"></script>**
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>

这是html幻灯片部分

            <div class="slideshow">
                <div id="wrapper">
                    <div class="controller" id="prev"></div>
                    <div id="slider">
                        <img src="images/slide1.jpg">
                        <img src="images/slide2.jpg">
                        <img src="images/slide3.jpg">
                    </div>
                    <div class="controller" id="next"></
                </div>
            </div>

谢谢你的回答。我在javascript中真的不太好.. :(

Answer 1

您使用了两个$(document).ready(function() {，其中一个未正确关闭

用以下代码替换您的代码：

$(document).ready(function() {

           $('#slider').cycle({
               fx: 'fade' 
                // choose your transition type, ex: fade, scrollUp, shuffle, etc...
                    });
   });

工作演示：http://jsbin.com/fejuc/1/edit

Answer 2

在js代码中删除第一行并尝试：

$(document).ready(function() {

因为您不需要两个doc ready块，而且您也没有结束标记。

你可以做的另一件事是样式表和脚本的堆栈顺序必须是这样的：

<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.js"></script>

你应该在js之前加载你的样式表，这是一个很好的做法。

幻灯片循环不起作用

2 个答案: