PDA

View Full Version : Change Speed on Continuous Scrolling Slideshow



pulseshadows
02-10-2012, 01:24 AM
1) Script Title: Continuous Scrolling Slideshow

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/leftrightslide2.htm

3) Describe problem: I was just wondering how to increase the speed of the scrolling images. They move very slowly from one picture to the next and I can't seem to get it to change.
Thanks for any help!

vwphillips
02-10-2012, 11:30 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
</head>

<body>
<script type="text/javascript" >

/*
Left-Right image slideshow Script-
By Dynamic Drive (www.dynamicdrive.com)
For full source code, terms of use, and 100's more scripts, visit http://dynamicdrive.com
*/

///////configure the below four variables to change the style of the slider///////
//set the scrollerwidth and scrollerheight to the width/height of the LARGEST image in your slideshow!
var scrollerwidth='100px'
var scrollerheight='106px'
var scrollerbgcolor='white'
//3000 miliseconds=3 seconds
var pausebetweenimages=3000
var speed=20;

//configure the below variable to change the images used in the slideshow. If you wish the images to be clickable, simply wrap the images with the appropriate <a> tag
var slideimages=new Array()
slideimages[0]='<a href="http://www.cnn.com"><img src="http://www.dynamicdrive.com/dynamicindex4/PE01805A.gif" border=0"></a>'
slideimages[1]='<img src="http://www.dynamicdrive.com/dynamicindex4/PE01803A.gif">'
slideimages[2]='<img src="http://www.dynamicdrive.com/dynamicindex4/TN00411A.gif">'
slideimages[3]='<img src="http://www.dynamicdrive.com/dynamicindex4/PE02054A.gif">'
slideimages[4]='<img src="http://www.dynamicdrive.com/dynamicindex4/cake.gif">'
//extend this list

///////Do not edit pass this line///////////////////////


if (slideimages.length>1)
i=2
else
i=0


function move3(tdiv){
if (parseInt(tdiv.style.left)>0&&parseInt(tdiv.style.left)<=speed){
tdiv.style.left=0+"px";
setTimeout(function(){ move3(tdiv); },pausebetweenimages);
setTimeout(function(){ move4(scrollerdiv2); },pausebetweenimages);
}
else if (parseInt(tdiv.style.left)>=tdiv.offsetWidth*-1){
tdiv.style.left=parseInt(tdiv.style.left)-speed+"px";
setTimeout(function(){ move3(tdiv); },50);
}
else{
tdiv.style.left=scrollerwidth;
tdiv.innerHTML=slideimages[i];
if (i==slideimages.length-1)
i=0;
else
i++;
}
}

function move4(tdiv){
if (parseInt(tdiv.style.left)>0&&parseInt(tdiv.style.left)<=speed){
tdiv.style.left=0+"px";
setTimeout(function(){ move4(tdiv); },pausebetweenimages);
setTimeout(function(){ move3(scrollerdiv1); },pausebetweenimages);
}
else if (parseInt(tdiv.style.left)>=tdiv.offsetWidth*-1){
tdiv.style.left=parseInt(tdiv.style.left)-speed+"px";
setTimeout(function(){ move4(scrollerdiv2); },50);
}
else{
tdiv.style.left=scrollerwidth;
tdiv.innerHTML=slideimages[i];
if (i==slideimages.length-1)
i=0;
else
i++;
}
}

function startscroll(){
scrollerdiv1=document.getElementById("first2");
scrollerdiv2=document.getElementById("second2");
move3(scrollerdiv1);
scrollerdiv2.style.left=scrollerwidth;
}

window.onload=startscroll

</script>





<script type="text/javascript">

document.writeln('<div id="main2" style="position:relative;width:'+scrollerwidth+';height:'+scrollerheight+';overflow:hidden;background-color:'+scrollerbgcolor+'">')
document.writeln('<div style="position:absolute;width:'+scrollerwidth+';height:'+scrollerheight+';clip:rect(0 '+scrollerwidth+' '+scrollerheight+' 0);left:0px;top:0px">')
document.writeln('<div id="first2" style="position:absolute;width:'+scrollerwidth+';left:1px;top:0px;">')
document.write(slideimages[0])
document.writeln('</div>')
document.writeln('<div id="second2" style="position:absolute;width:'+scrollerwidth+';left:0px;top:0px">')
document.write(slideimages[1])
document.writeln('</div>')
document.writeln('</div>')
document.writeln('</div>')

</script>

<p align="center"><font face="Arial" size="-2">Free DHTML scripts provided by<br>
<a href="http://dynamicdrive.com">Dynamic Drive</a></font></p>
</body>

</html>