« »

This JavaScript slideshow lets the user manually move back and forth between images, by clicking on the provided buttons.

Label: Horizontal Glide-Scroll OnClick

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Code
Files
JavaScript
HTML
Print

Copy All x2

<script type="text/javascript">

var wndo = [];

// Necessary to avoid errors before page loaded 
function dw_glideScrollBy(num, x, y, dur) {
  if ( wndo[num] && wndo[num].glideScrollBy ) wndo[num].glideScrollBy(x, y, dur);
}

function initScrollLayer() {
  // arguments: id of layer containing scrolling layers (clipped layer), id of layer to scroll, 
  // if horizontal scrolling, id of element containing scrolling content (table?)
  wndo[0] = new dw_scrollLayer('wn', 'lyr1', 't1');
  
  // pass id's of any wndo's that scroll inside tables
  // i.e., if you have 3 (with id's wn1, wn2, wn3): GeckoTableBugFix('wn1', 'wn2', 'wn3');
  GeckoTableBugFix('wn'); 
}
</script>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<LINK href="css/glide_scroll_h.css" type=text/css rel=stylesheet>
<script src="js/dw_glidescroll.js" type="text/javascript"></script>
<body onload="initScrollLayer()">
<table class="main" cellspacing="0" cellpadding="8" border="0">
<tr>
  <td> </td>
	<td>
<!-- scrolling layers -->
<div id="hold">
  <div id="wn">
  	<div id="lyr1" class="content">

    <table id="t1" cellpadding="0" cellspacing="0" border="0">
     <tr>
			<td><a href="http://jsbank.beplaced.com"><img src="../logojs.gif" width="175" height="40" alt="" /></a></td>
		  <td><img src="../logojs.gif" width="176" height="30" alt="" /></td>
  		<td><img src="../logojs.gif" width="132" height="32" alt="" /></td>
      <td><a href="http://jsbank.beplaced.com"><img src="../logojs.gif" width="175" height="40" alt="" /></a></td>
		  <td><img src="../logojs.gif" width="176" height="30" alt="" /></td>
  		<td><img src="../logojs.gif" width="132" height="32" alt="" /></td>
      <td><a href="http://jsbank.beplaced.com"><img src="../logojs.gif" width="175" height="40" alt="" /></a></td>

		  <td><img src="../logojs.gif" width="176" height="30" alt="" /></td>
  		<td><img src="../logojs.gif" width="132" height="32" alt="" /></td>
     </tr>
    </table>
    </div>
  </div>  <!-- end wn div -->
</div>	<!-- end hold div -->
  </td>

  <td> </td>
</tr>
<tr>
  <td class="spacer"> </td>
<!-- dw_glideScrollBy arguments: wndo element number, amount to scroll onclick on x, y axes, 
    (optional, not included here) duration of glide -->
	<td class="arrows">
    <a href="javascript:;" onclick="dw_glideScrollBy(0,200,0); return false" onmouseover="window.status='Click to scroll'; return true" onmouseout="window.status=''"><img src="images/aro-lft.gif" width="19" height="9" alt="" /></a> 
    <a href="javascript:;" onclick="dw_glideScrollBy(0,-200,0); return false" onmouseover="window.status='Click to scroll'; return true" onmouseout="window.status=''"><img src="images/aro-rt.gif" width="19" height="9" alt="" /></a>
  </td>
  <td class="spacer"> </td>

</tr>
<tr>
  <td> </td>
</tr>
</table>
</body>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->