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]()