Image scroll left to right

Image scroll to the right with hover stop effect with linked images. You can use this, for example, for buttons.

This is the code just for image - without linked images.

Example

Image scroll right to left

Image scroll to the left with hover stop effect without linked images.

// Define images for the scrolling
leftrightslide[i++] = '<img src="http://chimera-design.de/testimage.png">';
leftrightslide[i++] = '<img src="http://chimera-design.de/testimage.png">';
leftrightslide[i++] = '<img src="http://chimera-design.de/testimage.png">';
leftrightslide[i++] = '<img src="http://chimera-design.de/testimage.png">';

leftrightslide = '<nobr>' + leftrightslide.join("") + '</nobr>';
var iedom = document.all || document.getElementById;
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-3000px">' + leftrightslide + '</span>');
var actualwidth = '';
var cross_slide, ns_slide;

function slideleft(){
  if (iedom){
    if (parseInt(cross_slide.style.left) > -(actualwidth + 8)) {
      cross_slide.style.left = parseInt(cross_slide.style.left) - copyspeed + "px"; // Move left
    } else {
      cross_slide.style.left = parseInt(cross_slide2.style.left) + actualwidth + "px"; // Reset to the right of the second block
    }

if (parseInt(cross_slide2.style.left) > -(actualwidth + 8)) {
      cross_slide2.style.left = parseInt(cross_slide2.style.left) - copyspeed + "px"; // Move left
    } else {
      cross_slide2.style.left = parseInt(cross_slide.style.left) + actualwidth + "px"; // Reset to the right of the first block
    }
  }
  else if (document.layers){
    if (ns_slide.left > -(actualwidth + 8)) {
      ns_slide.left -= copyspeed;
    } else {
      ns_slide.left = ns_slide2.left + actualwidth;
    }

if (ns_slide2.left > -(actualwidth + 8)) {
      ns_slide2.left -= copyspeed;
    } else {
      ns_slide2.left = ns_slide.left + actualwidth;
    }
  }
}

// Handle hover to stop scrolling
if (iedom || document.layers) {
  with (document) {
    document.write('<table border="0" cellspacing="0" cellpadding="0"><td>');
    if (iedom) {
      document.write('<div style="position:relative;width:' + sliderwidth + 'px;height:' + sliderheight + 'px;overflow:hidden">');
      document.write('<div style="position:absolute;width:' + sliderwidth + 'px;height:' + sliderheight + 'px;background-color:' + slidebgcolor + '" onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed">');
      document.write('<div id="test2" style="position:absolute;left:0;top:0"></div>');
      document.write('<div id="test3" style="position:absolute;left:-1000;top:0"></div>');
      document.write('</div></div>');
    }
    else if (document.layers) {
      document.write('<ilayer width=' + sliderwidth + ' height=' + sliderheight + ' name="ns_slidemenu" bgColor=' + slidebgcolor + '>');
      document.write('<layer name="ns_slidemenu2" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>');
      document.write('<layer name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>');
      document.write('</ilayer>');
    }
    document.write('</td></table>');
  }
}

//--></div>
</script>

Scroll images

Image scroll left to right

Example

Image scroll right to left