Untitled

<?php


?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Slider</title>
    <link rel="stylesheet" type="text/css" media="screen" href="cssslider.css" >
    <link rel="stylesheet" type="text/css" media="screen" href="fontawesome/css/font-awesome.min.css">
    <script type="text/javascript" src="jquery-3.2.1.min.js"></script>

</head>
<body>

<div class="slider">
    <div id="fadedscreen"></div>
    <div id="boxzero" class="box current"></div>
    <div id="boxone" class="box waiting"></div>
    <div id="boxtwo" class="box waiting"></div>
    <div id="boxthree" class="box waiting"></div>
    <div id="boxfour" class="box waiting"></div>


</div>


<script>
    function rotateimages(){

        $(".box").css("visibility", "visible");
//        $( "div.current" ).next().css( "", "red" );
        var switchaxis = $(".current") ;

        var myid = switchaxis.attr("id");


        if (myid == "boxfour"){
            // we can't use next() we need to manually set the classes and
            // restart the order ...
            $("#boxzero").addClass("current").removeClass("waiting");
            switchaxis.addClass("waiting").removeClass("current");
            return ;
        }

//        alert(myid);
        switchaxis.next().addClass("current").removeClass("waiting");
        switchaxis.removeClass("current");
        switchaxis.addClass("waiting");

//        $( "div.current" ).next().addClass("current");
        // note that when it gets to the lasat div element ... there are no longer any
        // sibling elements to be sought by the .next() method ... so it will result in
        // "undefined" ...


    }

    $(document).ready(function(){


        setInterval("rotateimages()", 5000);


    });


</script>


</body>
</html>