CODEWITHSUNDEEP
javascriptjqueryhtmlslider
user3847213
user3847213

Reputation: 11

Why does my javascript code does not execute the slide show

//I want to make all my images slide, they are all the same (all of them are the same but with different position) so when the slide show plays it will look like the picture is moving

//Script and function

<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.css"></script>
<script type="text/javascript">

    function slideShow(){
        $(".interactiveContent#1").show("fade",500);
        $(".interactiveContent#1").delay(5500).hide("slide",{direction:'left'},500);

        var sc = $(".interactiveContent img").size();
        var count=2;

        setInterval(function(){
            $(".interactiveContent #"+count).show("slide",{direction:'right'},500);
            $(".interactiveContent #"+count).delay(5500).hide("slide",{direction:'left'},500);

            if(count==sc){
                count = 1;
            }else{
                count = count + 1;
            }
        },6500);
    }

</script>

//BODY with the images in a div tag//

<body onLoad="slideShow";>
    <div class="interactiveContent">
        <img id="1" src="pics/diagram1.png" alt="Diagram Displaying the Marketing Genius Process of Producing Digital Print Marketing Design and Ideas" />
        <img id="2" src="pics/diagram2.png" alt="Diagram Displaying the Marketing Genius Process of Producing Digital Print Marketing Design and Ideas" />
        <img id="3" src="pics/diagram3.png" alt="Diagram Displaying the Marketing Genius Process of Producing Digital Print Marketing Design and Ideas" />
        <img id="4" src="pics/diagram4.png" alt="Diagram Displaying the Marketing Genius Process of Producing Digital Print Marketing Design and Ideas" />
        <img id="5" src="pics/diagram5.png" alt="Diagram Displaying the Marketing Genius Process of Producing Digital Print Marketing Design and Ideas" />
        <img id="6" src="pics/diagram6.png" alt="Diagram Displaying the Marketing Genius Process of Producing Digital Print Marketing Design and Ideas" />
        <img id="7" src="pics/diagram7.png" alt="Diagram Displaying the Marketing Genius Process of Producing Digital Print Marketing Design and Ideas" />
        <img id="8" src="pics/diagram8.png" alt="Diagram Displaying the Marketing Genius Process of Producing Digital Print Marketing Design and Ideas" />
        <img id="9" src="pics/diagram9.png" alt="Diagram Displaying the Marketing Genius Process of Producing Digital Print Marketing Design and Ideas" />
        <img id="10" src="pics/diagram10.png" alt="Diagram Displaying the Marketing Genius Process of Producing Digital Print Marketing Design and Ideas" />
    </div>
</body>

Upvotes: 0

Views: 99

Answers (2)

ratiorick
ratiorick

Reputation: 746

$document.ready(function(){

(function slideShow(){
        $(".interactiveContent#1").show("fade",500);
        $(".interactiveContent#1").delay(5500).hide("slide",{direction:'left'},500);

        var sc = $(".interactiveContent img").size();
        var count=2;

        setInterval(function(){

            $(".interactiveContent #"+count).show("slide",{direction:'right'},500);
            $(".interactiveContent #"+count).delay(5500).hide("slide",{direction:'left'},500);

            if(count==sc){
                count = 1;
            }else{
                count = count + 1;
            }
        },6500);
})();

});

Upvotes: 0

Busches
Busches

Reputation: 1964

Looks like you're not kicking off the code. A simple <body onload="slideShow()"> or equivalent will solve your problem,.

Upvotes: 1

Related Questions