Question

我正在尝试为网站构建一个jquery幻灯片，我只是简单地使用jquery和javascript（不是真正的Web开发人员，我认为它很棒，但不是我的东西）我正在按照教程学习如何将代码绑在一起，并认为我把它放在一起。假设根据堆栈淡入淡出，我得到的只是闪烁。

<!DOCTYPE html>
<html>
<head>
    <title>Slideshow Tester</title>
    <style type="text/css">
        #slideshow{
            width: 500px;
            height: 500px;
            margin: 0 auto;
            position: relative:
        }
        .slide{
            width: 500px;
            height: 500px;
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js">
    /*global $, jQuery, console, window*/
        (function ($){
            "use strict";
            var slideshow = (function (){
                var counter = 0;
                i,
                j,
                slides = $("#slideshow .slide"),
                slidesLen = slides.length - 1;
                for(i = 0, j = 9999; i & lt; slides.length; i +=j, j -= 1){
                    $(slides[i]).css("z-index", j);
                }
                return{
                    startSlideshow: function(){
                        window.setInterval(function(){
                            if (counter === 0){
                                slides.eq(counter).fadeOut();
                                counter += 1;
                            }
                            else if(counter === slidesLen){
                                counter = 0;
                                slides.eq().fadeIn(function(){
                                    slides.fadeIn();
                                });
                            }
                            else{
                                slides.eq().fadeOut();
                                counter+=1;
                                }
                            }, 2000);
                        }
                    };
                }());
                slideshow.startSlideshow();
            }(jQuery));
    </script>
</head>
<body>
    <div class = "slider">
        <div id = "slideshow">
            <img class = "slide" src="img\DSC_0788.jpg" />
            <img class = "slide" src="img\facebook.jpg" />
            <img class = "slide" src="img\DSC_0788.jpg" />
            <img class = "slide" src="img\facebookGrey.jpg" />
            <img class = "slide" src="img\DSC_0788.jpg" />
        </div>
    </div>
</body>
</html>

有人有任何想法吗？

Answer 1

您不能在带有外部源的脚本标记内部使用JavaScript代码。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js">
    /*global $, jQuery, console, window*/

需要

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script>
    /*global $, jQuery, console, window*/

Answer 2

尝试以下

正确关闭脚本......

   <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
     <script>
     /*global $, jQuery, console, window*/
       (function ($){
            "use strict";
     ..........
      </script>

并将两个脚本放在

之上

    <div class = "slider">

但在

之下

 <body>

部分而不是头部。并保持样式css，因为它在头部。还检查是否有任何其他版本的外部jquery脚本...以及此1.4.2版本...如果是...使用noconflict（）

为什么这个jQuery幻灯片不起作用？

2 个答案: