SlideShow With Buttons in PHP

Introduction

In this article I will explain slideshow with button in PHP. I will use some JavaScript functions and create a dropdown with a button and I use an image for sliding. In the head section I will use CSS for the design. Four common buttons will be used for:

  • Start
  • Stop
  • Preview
  • Next

Example

<html>

<head>

<title>Silde Show Example</title>

<style type="text/css">

ul.pos

{

       position: relative;

}

.pos li

{

       list-style-type: none;

       Position: absolute;

       Top: 0;

       Left: 0;

}

.pos image

{

       Border: 1px solid #e7e7e7;

       Padding: 5px;

       bg-color: #ececec;

}

</style>

</head>

<body>

//creating buttons

<button type="button" id="pre">pre</button>

<button type="button" id="stop">stop</button>

<button type="button" id="start">start</button>

<button type="button" id="next">next</button>

<ul class="pos">

       <li><img src="download.jpg" alt="download"></img></li>

       <li><img src="abc.jpg" alt="abc"></img></li>

       <li><img src="abcd.jpg" alt="abcd"></img></li>

       <li><img src="abb.jpg" alt="abb"></img></li>

       <li><img src="acc.jpg" alt="acc"></img></li>

       <li><img src="add.jpg" alt="add"></img></li>

       <li><img src="aee.jpg" alt="aee"></img></li>

       <li><img src="aff.jpg" alt="aff"></img></li>

</ul>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript">

    //slideshow

    $('.pos li:gt(0)').hide();

    $('.pos li:last').addClass('last');

    $('.pos li:first').addClass('first');

    $('#start').hide();

    var ab = $('.pos li:first');

    var interval;

    $('#next').click(function () {

        gonext();

        showstop();

    });

    $('#pre').click(function () {

        gopre();

        showstop();

    });

    $('#stop').click(function () {

        stop();

        showstart();

    });

    $('#start').click(function () {

        start();

        showstop();

    });

    function gonext() {

        stop();

        next();

        start();

    }

    function gopre() {

        stop();

        pre();

        start();

    }

    // preview function

    function pre() {

        ab.fadeOut(1000);

        if (ab.attr('class') == 'first')

            ab = $('.pos li:last');

        else

            ab = ab.prev();

        ab.fadeIn(1000);

    }

    // next function

    function next() {

        ab.fadeOut(1000);

        if (ab.attr('class') == 'last')

            ab = $('.pos li:first');

        else

            ab = ab.next();

        ab.fadeIn(1000);

    }

    function showstop() {

        $('#start').hide();

        $('#stop').show();

    }

    function showstart() {

        $('#stop').hide();

        $('#start').show();

    }

    //start function

    function start() {

        interval = setInterval("next()", 3000);

    }

    //stop function

    function stop() {

        clearInterval(interval);

    }

 

    $(function () {

        start();

    });

</script>

</body>

</html>
 

Output

When you click on the "Start" button:

slide1.jpg

When you click on the "Stop" button:

slide2.jpg

When you click on the "Preview" button:

slide3.jpg

When you click on the "Next" button:

slide4.jpg

Up Next
    Ebook Download
    View all
    Learn
    View all