Image Scroller

[Total: 0    Average: 0/5]

This script scrolls a layer of HTML code in any direction at any speed.

Head Code:

<SCRIPT LANGUAGE="JavaScript">
<!--
//**************************************************************
//
// ScrollLayer Class (Version 1) aka "Image Scroller"
// Jim Wu
// eecs101@hotmail.com
// Example: http://winxpnews.cjb.net
//
// Generic functions that scrolls any data on a layer in the
// direction specified.  For example, the layer can be filled
// with a row of images (or any HTML code) and the user can
// scroll through those images (or HTML).  The user can create
// as many of these "ScrollLayers" as he/she wish.  Currently
// supports IE5+ only.
//
//**************************************************************

// Information container for a ScrollLayer
function ScrollStruct(objName, layerID, xPos, yPos, orientation, visibleSize)
{
this.name          = objName;
this.layerID       = layerID;
this.xPos          = xPos;
this.yPos          = yPos;
this.orientation   = orientation;
this.visibleSize   = visibleSize;
this.clipOffsetPos = 0; // Relative from LEFT if "Horiz", TOP if "Vert" 
this.dist          = 0;
this.speed         = 0;
this.stopPoint     = 0;
this.intervalID    = 0; // For setInterval and clearInterval
this.scrolling     = false; 
}

//**************************************************************
//
// function ScrollLayer()
//
// The ScrollLayer function moves the clip to the offset
// location stored in "clipOffsetPos" relative to the layer
// in either the horizontal or vertical direction depending
// on the "orientation" of the layer.
//
//
//  DEBUG INFO
//  ADD: Need to add Netscape support (Currently supports IE5+).
//
//**************************************************************
function ScrollLayer(scrollStruct)
{
var width   = parseInt(document.all[scrollStruct.layerID].style.width);
var height  = parseInt(document.all[scrollStruct.layerID].style.height);

if (scrollStruct.clipOffsetPos + scrollStruct.speed >= 0
&& scrollStruct.clipOffsetPos + scrollStruct.speed + scrollStruct.visibleSize
<= (scrollStruct.orientation == "Horiz" ? width : height))
{
scrollStruct.clipOffsetPos += scrollStruct.speed;

// Check for stop points
if (scrollStruct.speed > 0
&& scrollStruct.dist*(scrollStruct.stopPoint+1) >= scrollStruct.clipOffsetPos - scrollStruct.speed
&& scrollStruct.dist*(scrollStruct.stopPoint+1) <= scrollStruct.clipOffsetPos)
{
scrollStruct.stopPoint += 1;
clearInterval(scrollStruct.intervalID);
scrollStruct.scrolling = false;
}
else if (scrollStruct.speed < 0
&& scrollStruct.dist*(scrollStruct.stopPoint-1) >= scrollStruct.clipOffsetPos
&& scrollStruct.dist*(scrollStruct.stopPoint-1) <= scrollStruct.clipOffsetPos - scrollStruct.speed)
{
scrollStruct.stopPoint -= 1;
clearInterval(scrollStruct.intervalID);
scrollStruct.scrolling = false; 
} 

// Create and display the clip in the approppriate location
// if the position of the clip remains inside the layer.
// clip: rect(top right bottom left)
if (scrollStruct.orientation == "Horiz")
{
document.all[scrollStruct.layerID].style.posLeft = scrollStruct.xPos - scrollStruct.clipOffsetPos;
document.all[scrollStruct.layerID].style.posTop  = scrollStruct.yPos; 
document.all[scrollStruct.layerID].style.clip    = "rect(auto " + (scrollStruct.clipOffsetPos + scrollStruct.visibleSize) + "px auto " + scrollStruct.clipOffsetPos + "px)";
}
else if (scrollStruct.orientation == "Vert")
{
document.all[scrollStruct.layerID].style.posLeft = scrollStruct.xPos;
document.all[scrollStruct.layerID].style.posTop  = scrollStruct.yPos - scrollStruct.clipOffsetPos;
document.all[scrollStruct.layerID].style.clip    = "rect(" + scrollStruct.clipOffsetPos + "px auto " + (scrollStruct.clipOffsetPos + scrollStruct.visibleSize) + "px auto)"; 
}
else return;
document.all[scrollStruct.layerID].style.visibility = "visible"; 
}
else 
{
clearInterval(scrollStruct.intervalID);
scrollStruct.scrolling = false;
}
}

// Methods to perform on a Scroll Layer
function ScrollForward(scrollStruct, dist, speed)
{
    if (!scrollStruct.scrolling)
{
scrollStruct.dist       = dist;
scrollStruct.speed      = speed;
scrollStruct.scrolling  = true;
scrollStruct.intervalID = setInterval("ScrollLayer(" + scrollStruct.name + ")", 1);
}
}
function ScrollBackward(scrollStruct, dist, speed)
{
    if (!scrollStruct.scrolling)
{
scrollStruct.dist       = dist;
scrollStruct.speed      = -speed;
scrollStruct.scrolling  = true; 
scrollStruct.intervalID = setInterval("ScrollLayer(" + scrollStruct.name + ")", 1);
}
}
function PauseScroll(scrollStruct)
{
clearInterval(scrollStruct.intervalID);
scrollStruct.scrolling = false;
}
//-->
</SCRIPT>

Body Code:

<!-- myHorizScrollLayer -->
<div id="myHorizScrollLayer" style="z-index:1; width:1000px; height:75px; visibility:hidden; position:absolute">
  <nobr>
    <img src="http://www.js-x.com/js/pic1.gif" width="100" height="75">
    <img src="http://www.js-x.com/js/pic2.gif" width="100" height="75">
    <img src="http://www.js-x.com/js/pic3.gif" width="100" height="75">
    <img src="http://www.js-x.com/js/pic4.gif" width="100" height="75">
    <img src="http://www.js-x.com/js/pic1.gif" width="100" height="75">
    <img src="http://www.js-x.com/js/pic2.gif" width="100" height="75">
    <img src="http://www.js-x.com/js/pic3.gif" width="100" height="75">
    <img src="http://www.js-x.com/js/pic4.gif" width="100" height="75">
    <img src="http://www.js-x.com/js/pic1.gif" width="100" height="75">
  </nobr>
</div>
<SCRIPT>
<!--
// Declare a new Scroll Layer object
newHorizScrollLayer = new ScrollStruct('newHorizScrollLayer', 'myHorizScrollLayer', 100, 100, 'Horiz', 520);
// Initialize (Show) the new Scroll Layer
ScrollLayer(newHorizScrollLayer);
//-->
</SCRIPT>
<a href="javascript:ScrollBackward(newHorizScrollLayer, 150, 1)"> HBackward </a>&nbsp;
<a href="javascript:PauseScroll(newHorizScrollLayer)"> HPause </a>&nbsp;
<a href="javascript:ScrollForward(newHorizScrollLayer, 150, 1)"> HForward </a>&nbsp;


<!-- myVertScrollLayer -->
<div id="myVertScrollLayer" style="z-index:2; width:75px; height:1000px; visibility:hidden; position:absolute">
<table>
  <tr><td><img src="http://www.js-x.com/js/pic1.gif" width="100" height="75"></td></tr>
  <tr><td><img src="http://www.js-x.com/js/pic1.gif" width="100" height="75"></td></tr>
  <tr><td><img src="http://www.js-x.com/js/pic1.gif" width="100" height="75"></td></tr>
  <tr><td><img src="http://www.js-x.com/js/pic1.gif" width="100" height="75"></td></tr>
  <tr><td><img src="http://www.js-x.com/js/pic1.gif" width="100" height="75"></td></tr>
  <tr><td><img src="http://www.js-x.com/js/pic1.gif" width="100" height="75"></td></tr>
  <tr><td><img src="http://www.js-x.com/js/pic1.gif" width="100" height="75"></td></tr>
  <tr><td><img src="http://www.js-x.com/js/pic1.gif" width="100" height="75"></td></tr>
  <tr><td><img src="http://www.js-x.com/js/pic1.gif" width="100" height="75"></td></tr>
</table>
</div>
<SCRIPT>
<!--
// Declare a new Scroll Layer object
newVertScrollLayer = new ScrollStruct('newVertScrollLayer', 'myVertScrollLayer', 100, 200, 'Vert', 520);
// Initialize (Show) the new Scroll Layer
ScrollLayer(newVertScrollLayer);
//-->
</SCRIPT>
<a href="javascript:ScrollBackward(newVertScrollLayer, 200, 25)"> VBackward </a>&nbsp;
<a href="javascript:PauseScroll(newVertScrollLayer)"> VPause </a>&nbsp;
<a href="javascript:ScrollForward(newVertScrollLayer, 200, 25)"> VForward </a>&nbsp;

Times Viewed: 7

Leave a Reply

Your email address will not be published. Required fields are marked *