Here is an example for html slider - Only using HTML & Javascript.
Nice animated slider (good looking animation)
Code:
<html>
<head>
<style>
.spltr {width: 4px; background-color: firebrick;}
</style>
<script language="javascript" type="text/javascript">
function scrollSpeedAdd(obj,step)
{
scrollStop();
scrollAdd(obj, scrollAdd.step + step);
}
function scrollAdd(obj,step)
{
scrollAdd.elem = document.getElementById('MainSlideDiv');
if(scrollAdd.elem)
{
scrollAdd.step = step;
scrollAdd.I = window.setInterval(startScroll,10);
}
}
function startScroll()
{
scrollAdd.elem.scrollLeft = scrollAdd.elem.scrollLeft + scrollAdd.step;
}
function scrollStop()
{
window.clearInterval(scrollAdd.I);
}
</script>
</head>
<body
<b>Set your mouse over the arrows...</b><br /><br />
<table width="700" border="0" cellspacing="0" cellpadding="0" bgcolor="khaki">
<tr style="text-align: center;">
<td width="30" onmouseout="scrollStop();" onmouseover="scrollAdd(this,-2)" onclick="scrollSpeedAdd(this,-1)"> << </td>
<td width="640" align="center">
<div style="overflow:hidden; width:630; height:55;" id="MainSlideDiv" dir="rtl">
<table width="100%" style="text-align:center" border="0" cellspacing="5" cellpadding="5">
<tr>
<td>Test 1111 </td>
<td class="spltr"> </td>
<td>Test 2222 </td>
<td class="spltr"> </td>
<td>Test 3333 </td>
<td class="spltr"> </td>
<td>Test 4444 </td>
<td class="spltr"> </td>
<td>Test 5555 </td>
<td class="spltr"> </td>
<td>Test 6666 </td>
<td class="spltr"> </td>
<td>Test 7777 </td>
<td class="spltr"> </td>
<td>Test 8888 </td>
<td class="spltr"> </td>
<td>Test 9999 </td>
<td class="spltr"> </td>
<td>Test AAAA </td>
<td class="spltr"> </td>
<td>Test BBBB </td>
<td class="spltr"> </td>
<td>Test CCCC </td>
<td class="spltr"> </td>
<td>Test DDDD </td>
<td class="spltr"> </td>
<td>Test EEEE </td>
<td class="spltr"> </td>
<td>Test FFFF </td>
<td class="spltr"> </td>
</tr>
</table>
</div>
</td>
<td width="30" onmouseout="scrollStop()" onmouseover="scrollAdd(this,2)" onclick="scrollSpeedAdd(this,+1)"> >> </td>
</tr>
</table>
</body>
</html>
<head>
<style>
.spltr {width: 4px; background-color: firebrick;}
</style>
<script language="javascript" type="text/javascript">
function scrollSpeedAdd(obj,step)
{
scrollStop();
scrollAdd(obj, scrollAdd.step + step);
}
function scrollAdd(obj,step)
{
scrollAdd.elem = document.getElementById('MainSlideDiv');
if(scrollAdd.elem)
{
scrollAdd.step = step;
scrollAdd.I = window.setInterval(startScroll,10);
}
}
function startScroll()
{
scrollAdd.elem.scrollLeft = scrollAdd.elem.scrollLeft + scrollAdd.step;
}
function scrollStop()
{
window.clearInterval(scrollAdd.I);
}
</script>
</head>
<body
<b>Set your mouse over the arrows...</b><br /><br />
<table width="700" border="0" cellspacing="0" cellpadding="0" bgcolor="khaki">
<tr style="text-align: center;">
<td width="30" onmouseout="scrollStop();" onmouseover="scrollAdd(this,-2)" onclick="scrollSpeedAdd(this,-1)"> << </td>
<td width="640" align="center">
<div style="overflow:hidden; width:630; height:55;" id="MainSlideDiv" dir="rtl">
<table width="100%" style="text-align:center" border="0" cellspacing="5" cellpadding="5">
<tr>
<td>Test 1111 </td>
<td class="spltr"> </td>
<td>Test 2222 </td>
<td class="spltr"> </td>
<td>Test 3333 </td>
<td class="spltr"> </td>
<td>Test 4444 </td>
<td class="spltr"> </td>
<td>Test 5555 </td>
<td class="spltr"> </td>
<td>Test 6666 </td>
<td class="spltr"> </td>
<td>Test 7777 </td>
<td class="spltr"> </td>
<td>Test 8888 </td>
<td class="spltr"> </td>
<td>Test 9999 </td>
<td class="spltr"> </td>
<td>Test AAAA </td>
<td class="spltr"> </td>
<td>Test BBBB </td>
<td class="spltr"> </td>
<td>Test CCCC </td>
<td class="spltr"> </td>
<td>Test DDDD </td>
<td class="spltr"> </td>
<td>Test EEEE </td>
<td class="spltr"> </td>
<td>Test FFFF </td>
<td class="spltr"> </td>
</tr>
</table>
</div>
</td>
<td width="30" onmouseout="scrollStop()" onmouseover="scrollAdd(this,2)" onclick="scrollSpeedAdd(this,+1)"> >> </td>
</tr>
</table>
</body>
</html>
No comments:
Post a Comment