Conveyor belt slideshow script too fast

[Jungleman]

Hi there,

Great script BTW.

But the lowest speed set at 1 is still too slow. (var slidespeed=1)

How can I make it slower? I guess it is something to do with the copyspeed variable? Any help would be much appreciated.

[jscheuer1]

Do you have a particularly fast computer? One is pretty slow on mine. Also, you should know that often these speeds vary in different browsers. Anyways, here is the line in the script that can really slow things down for you:

lefttime=setInterval("slideleft()",30)

See that red number, it is the number of milliseconds between the tiny incremental movements of the conveyor. Increasing it will slow things down but, too much of an increase will make the movement appear choppy. I'd try 90 tops.

[Jungleman]

Great! That was the answer.

It seems to run the same speed in the different browsers I tested.

Actually, the hardest part is figuring what is the optimum speed for users, as I am using it as navigation feature. That is a design consideration rather than a coding issue. How about giving users the option to set the speed?

[jscheuer1]

OK, find this line again:

lefttime=setInterval("slideleft()",30)

Change it to this:

lefttime=setTimeout("slideleft()",mspeed)

Just after the 'do not edit' line, add this variable:

////NO NEED TO EDIT BELOW THIS LINE////////////
var mspeed=30

Find these lines at the end of the slideleft() function:

ns_slide2.left=ns_slide.left+actualwidth+slideshowgap
}
}

Make them look like this:

ns_slide2.left=ns_slide.left+actualwidth+slideshowgap
}
lefttime=setTimeout("slideleft()",mspeed)
}

Add this function and conditional document.write statement just above the closing </script> tag:

function speed(inc){
if (inc){
if (slidespeed>2)
copyspeed=slidespeed-=2
else
mspeed=mspeed<55? mspeed+25 : mspeed
}
else {
if (mspeed>30)
mspeed-=25
else
copyspeed=slidespeed+=2
}
}

if (iedom)
document.write('<div style="width:'+sliderwidth+';"><br><center><span style="font-family:verdana,arial,sans-serif;position:relative;top:-7px;">Set Speed</span><br><input type="button" value="Slower" onclick="speed(1)">&nbsp;&nbsp;<input type="button" value="Faster" onclick="speed(0)"></center>')

[pisey]

I am a new member I try to post a new threat but can't. Anyway the script is very handy to me and I try to change dirction from right-to-left to left-to-right but no result so can any body show me how can I can it.

Thanks

[jscheuer1]

<script type="text/javascript">

/***********************************************
* Conveyor belt slideshow script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
* Modified for left or right direction w/optional reverse button
* by jscheuer1 in http://www.dynamicdrive.com/forums
***********************************************/


//Specify the slider's width (in pixels)
var sliderwidth="300px"
//Specify the slider's height
var sliderheight="225px"
//Specify the slider's slide speed (larger is faster 1-10)
var slidespeed=3
//Specify the slider's direction 0 for left 1 for right
var slideDirect=1
//Allow reverse? 0 for no 1 for yes
var allowReverse=0
//configure background color:
slidebgcolor="#EAEAEA"

//Specify the slider's images
var leftrightslide=new Array()
var finalslide=''
leftrightslide[0]='<a href="http://"><img src="../thumb2/photo1.jpg" border=1></a>'
leftrightslide[1]='<a href="http://"><img src="../thumb2/photo2.jpg" border=1></a>'
leftrightslide[2]='<a href="http://"><img src="../thumb2/photo3.jpg" border=1></a>'
leftrightslide[3]='<a href="http://"><img src="../thumb2/photo4.jpg" border=1></a>'
leftrightslide[4]='<a href="http://"><img src="../thumb2/photo5.jpg" border=1></a>'

//Specify gap between each image (use HTML):
var imagegap=" "

//Specify pixels gap between each slideshow rotation (use integer):
var slideshowgap=5


////NO NEED TO EDIT BELOW THIS LINE////////////

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

function fillup(){
if (iedom){
cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2
cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3
cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide
actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth
cross_slide2.style.left=actualwidth+slideshowgap+"px"
}
else if (document.layers){
ns_slide=document.ns_slidemenu.document.ns_slidemenu2
ns_slide2=document.ns_slidemenu.document.ns_slidemenu3
ns_slide.document.write(leftrightslide)
ns_slide.document.close()
actualwidth=ns_slide.document.width
ns_slide2.left=actualwidth+slideshowgap
ns_slide2.document.write(leftrightslide)
ns_slide2.document.close()
}
lefttime=slideDirect? setInterval("slideright()",30) : setInterval("slideleft()",30)
}
window.onload=fillup

function slideright(){
if (iedom){
if (parseInt(cross_slide.style.left)<(actualwidth+8))
cross_slide.style.left=parseInt(cross_slide.style.left)+copyspeed+"px"
else
cross_slide.style.left=parseInt(cross_slide2.style.left)+(actualwidth+slideshowgap)*(-1)+"px"

if (parseInt(cross_slide2.style.left)<(actualwidth+8))
cross_slide2.style.left=parseInt(cross_slide2.style.left)+copyspeed+"px"
else
cross_slide2.style.left=parseInt(cross_slide.style.left)+(actualwidth+slideshowgap)*(-1)+"px"

}
else if (document.layers){
if (ns_slide.left<(actualwidth+8))
ns_slide.left+=copyspeed
else
ns_slide.left=ns_slide2.left+(actualwidth+slideshowgap)*(-1)

if (ns_slide2.left<(actualwidth+8))
ns_slide2.left+=copyspeed
else
ns_slide2.left=ns_slide.left+(actualwidth+slideshowgap)*(-1)
}
}

function slideleft(){
if (iedom){
if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8))
cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed+"px"
else
cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+slideshowgap+"px"

if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8))
cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed+"px"
else
cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+slideshowgap+"px"

}
else if (document.layers){
if (ns_slide.left>(actualwidth*(-1)+8))
ns_slide.left-=copyspeed
else
ns_slide.left=ns_slide2.left+actualwidth+slideshowgap

if (ns_slide2.left>(actualwidth*(-1)+8))
ns_slide2.left-=copyspeed
else
ns_slide2.left=ns_slide.left+actualwidth+slideshowgap
}
}

if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><tr><td>')
if (iedom){
write('<div style="position:relative;width:'+sliderwidth+';height:'+sliderheight+';overflow:hidden">')
write('<div style="position:absolute;width:'+sliderwidth+';height:'+sliderheight+';background-color:'+slidebgcolor+'" onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed">')
write('<div id="test2" style="position:absolute;left:0px;top:0px"></div>')
write('<div id="test3" style="position:absolute;left:-1000px;top:0px"></div>')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+sliderwidth+' height='+sliderheight+' name="ns_slidemenu" bgColor='+slidebgcolor+'>')
write('<layer name="ns_slidemenu2" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('<layer name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('</ilayer>')
}
if (allowReverse&&!document.layers){
write('</td></tr><tr><td align="center"><br>')
document.write('<input type="button" value="Reverse" onclick="reverseSlide()">')
}
document.write('</td></tr></table>')
}
}

function reverseSlide(){
clearInterval(lefttime)
slideDirect=slideDirect? 0 : 1
lefttime=slideDirect? setInterval("slideright()",30) : setInterval("slideleft()",30)
}
</script>