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:

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