Question

I'm following this tutorial (Removed link as YouTube videos are not allowed on SO).

I can't understand why the banner wont flick through as it should, I have 4 images I intend it to flick through.

Also if anyone does solve this how can I make the images link to another page, e.g is it as simple as adding <a href=.......> in the HTML code?

HTML:

<script type="text/javascript" src:"jquery.js"></script>
<div id="banner">
    <img src="images/banner1.jpg" class="active" />
    <img src="images/banner4.jpg" />
    <img src="images/banner2.jpg" />
    <img src="images/banner3.jpg" />
</div>

javascript/jQuery

    $(document).ready(function () {
    setInterval(function () {
        //Get current active image
        var active = $('#banner .active');

        // If there is another image(object) left then make that image next
        // If not, go back to the first image of the banner div
        if (active.next().length > 0) var next = active.next();
        else var next = $('#banner img:first');

        //Get the next image ready by modifying the z-index
        next.css('z-index', '2');

        //Fade out the active image, then
        active.fadeOut(1000, function () {

        });
        //Move the active image to the back of the pile, show it and             remove     the active class
        active.css('z-index', '1').show().removeClass('active');
        //Make the next image the active one    
        next.css('z-index', '3').addClass('active');
    });

}, 3000);
}); 

CSS

#banner {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    height: 350px;
    width: 950px;
    margin-top: 10px;
}
#banner img {
    position:absolute;
    z-index:1;
}
#banner img.active {
    z-index:3;
}
Was it helpful?

Solution

Right so to start with you don't have your script linked up.

You have:

<script type="text/javascript" src:"jquery.js"></script>

It should be:

<script type="text/javascript" src="jquery.js"></script>

As you have just put jquery.js that means if you homepage (whatever page is using it) is in C:\Users\Me\Documents\Website then jquery.js also needs to be in that same folder.


Then we move to the jQuery, its all ok untill the end of it. You close it with }, 3000); but then try to close it again using });. The indentation also gives it away.

So when we fix that we get this DEMO HERE

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top