CODEWITHSUNDEEP
javascriptjqueryhtml
user2707813
user2707813

Reputation:

Why is this jQuery Slideshow not working?

I am trying to build a jquery slideshow for a website, I have only worked with jquery and javascript briefly (not really a web developer fan, I think its great and all but not my thing) I was following a tutorial to learn how to tie the code together and thought I had it put together. It is suppose to fade in and out according to the stack and all I am getting is a flicker.

<!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>

Anybody got any ideas?

Upvotes: 0

Views: 77

Answers (2)

Dr M L M J
Dr M L M J

Reputation: 2397

Try Following

close script properly...

   <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>

And Put Both script just above 

    <div class = "slider">

but below

 <body>

part instead of head section. And Keep style css as it is in head section. Also Check if there is any other version of external jquery scrip ...along with this 1.4.2 version...if it is...use noconflict()

Upvotes: 0

epascarello
epascarello

Reputation: 207501

You can not have JavaScript code inside of a script tag with an external source.

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

needs to be

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

Upvotes: 1

Related Questions