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>

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="start">start</button>

</ul>

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

When you click on the "Stop" button:

When you click on the "Preview" button:

When you click on the "Next" button: