...

View Full Version : How can I add a pause to this ?



jeddi
03-24-2012, 03:40 PM
Hi,

I found a nice simple javascript slider but there is a small
change I want to make.

How can I make the slider pause for one or two seconds
when the image has slid fully into position ?



<style>
#ParentDiv
{
margin: auto;
width: 200px;
overflow: hidden;
}

#ChildDiv
{
width: 6000px;
position:relative;
cursor:pointer;
}
#ParentDiv img
{
float: left;
padding: 3px;
margin: 0px;
}
</style>

<script type="text/javascript">
//Array Of Image, [URL, width of Image, LinkTo]
var t;
var StepTime=20;
var StepPixel=2;
var ImgPadding=3;
var ParentDivLen=200;
var Img= Array(
["http://mobi6.net/images/screen1.png", 200, "index.php"],
["http://mobi6.net/images/screen2.png", 200, "index.php"],
["http://mobi6.net/images/screen3.png", 200, "index.php"],
["http://mobi6.net/images/screen1.png", 200, "index.php"],
["http://mobi6.net/images/screen2.png", 200, "index.php"],
["http://mobi6.net/images/screen3.png", 200, "index.php"],
["http://mobi6.net/images/screen1.png", 200, "index.php"],
["http://mobi6.net/images/screen2.png", 200, "index.php"],
["http://mobi6.net/images/screen3.png", 200, "index.php"]
);
var Pos=3;
var Len=Img.length;

var DivWidth=0;
var MoreImage=0;

function goURL(URLS) {
document.location.href=URLS;
}
for(i=0;i<Len;i++)
{
DivWidth+=Img[i][1] + ImgPadding*2;
if(MoreImage==0 && DivWidth>ParentDivLen)MoreImage=i;
}
function getE(id)
{
return document.getElementById(id);
}

function Dr_Img(IMG)
{
return '<img src="'+ IMG[0] + '" onclick="goURL(\'' + IMG[2] + '\')">';
}

function Dr_ImgArr()
{
var str='';
for(i=0;i<Len;i++) str += Dr_Img(Img[i]);
for(i=0;i<MoreImage;i++)str += Dr_Img(Img[i]);
document.write(str);
}

function DoSlide()
{
if(Pos==0)Pos=-1;
divtg=getE('ChildDiv');
Pos-=StepPixel;
if(Pos<-DivWidth)Pos=0;
divtg.style.left=Pos +'px';
t=setTimeout('DoSlide()',StepTime);

}

function SlideStop()
{
clearTimeout(t);
}
function setmouse(id)
{
if(id==1)
{
DoSlide();
}
else
{
SlideStop();
}
}
</script>

</head>
<body onload="DoSlide()">
<div id="ParentDiv">
<div id="ChildDiv" onmouseout="setmouse(1);" onmouseover="setmouse(2);">

<script>
Dr_ImgArr();
</script>
</div>
</div>

I have tried adding wait(2) in a couple of places but
the script just failed to run.

Any ideas ?


Thanks.



.

Mishu
03-24-2012, 11:50 PM
You are doing this the hard way by writing an <img> for each image. It is easier to have just 1 <img> and change the src for the img. This way, when an image has completed sliding off you can use setTimeout to pause the next image before it begins to slide off.

Old Pedant
03-25-2012, 12:17 AM
Excepting that you would then want to preload the images, else the first time through there could be a substantial wait until the next image is fully loaded.

Excepting also that what he wants to do is slide a new image into position as the old one is sliding off. That is he wants a continuous image strip. So he would need minimum of at least 2 adjacent images.

And if the images aren't the same width, you could need more than that. Say the first image is 800 pixels wide but the next 4 are each only 200 pixels wide. So now you need 5 adjacent images, as it will take all 4 of the images 2 through 5 to slide in place of the first 800 pixel image.

You can use a 2 image slider if all images are the same width, but not otherwise.

His slider *is* the simplest kind when images are different widths.

Mishu
03-25-2012, 12:48 AM
This is the way I have done it in the past. You can use it if it's any help to you :)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title></title>
<style type="text/css">
#banner {
display: none;
position: relative;
border: 3px solid black;
overflow: hidden;
}
#imgContainer {
position: absolute;
top: 0px;
left: 0px;
}
#imgContainer img{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
display: inline;
}
</style>
<script type="text/javascript">
var picPaths = ['num1.jpg','num2.jpg','num3.jpg'];
var step = 5; //pixels
var speed = 50; //milliseconds
var slidePause = 2000; //milliseconds
var curPos = 0;
var timer;
function slideImages(){
curPos -= step;
if(curPos < -picWidth){ //finished moving up 1 image
clearTimeout(timer);
reOrderImgs();
imgContainerO.style.left = curPos +'px';
} else { //continue sliding up
imgContainerO.style.left = curPos +'px';
timer = setTimeout(slideImages,speed);
}
}
function reOrderImgs(){
var childElems = imgContainerO.childNodes; //first child is a text node
for(i=0; i < childElems.length; i++){
if(childElems[i].nodeName.toLowerCase() == 'img'){
var firstImgO = childElems[i];
i = childElems.length;
}
}
imgContainerO.appendChild(imgContainerO.removeChild(firstImgO));
curPos = 0;
setTimeout(slideImages,slidePause);
}
window.onload=function(){
preloadedImgs = document.getElementById('preloadedPics').getElementsByTagName('img');
//preload the images
picsO = new Array();
for(i=0; i < preloadedImgs.length; i++){
picsO[i] = new Image();
picsO[i].src = preloadedImgs[i].src;
}
picWidth = picsO[0].width;
picHeight = picsO[0].height;
bannerO = document.getElementById('banner');
imgContainerO = document.getElementById('imgContainer');
imgContainerO.style.width = picWidth*picsO.length+'px';
for(i=0; i < picsO.length; i++){
var newImg = document.createElement('img');
newImg.id = 'img_'+(i+1);
newImg.setAttribute('src',picsO[i].src);
imgContainerO.appendChild(newImg);
}
bannerO.style.height = picHeight+'px';
bannerO.style.width = picsO[0].width+'px';
bannerO.style.display = 'block';
document.body.removeChild(document.getElementById('preloadedPics'));
setTimeout(slideImages,500);
}
</script>
</head>
<body>
<!-- preload the images so we can use their actual width and height property
to scale the thumbnails -->
<div id="preloadedPics" style="display: none"></div>
<script type="text/javascript">
for(i=0; i < picPaths.length; i++){
var newImg = document.createElement('img');
newImg.src = picPaths[i];
document.getElementById('preloadedPics').appendChild(newImg);
}
</script>
<!-- --------------------End of image preloads ------------------ -->
<div id="banner">
<div id="imgContainer"></div>
</div>
</body>
</html>

Philip M
03-25-2012, 12:30 PM
This is the way I have done it in the past. You can use it if it's any help to you :)


Wow! That is the same code posted by bullant (banned) at
http://www.codingforums.com/showthread.php?t=227071

jeddi
03-25-2012, 02:22 PM
Thanks for all your response.

My images are all the same size.

I'll try the code suggested :)

Old Pedant
03-25-2012, 08:40 PM
Wow! That is the same code posted by bullant (banned) at
http://www.codingforums.com/showthread.php?t=227071

LOL! Man, are you ever the detective, Philip!

Mishu
03-26-2012, 07:23 AM
Wow! That is the same code posted by bullant (banned) at
http://www.codingforums.com/showthread.php?t=227071

I actually copied it from sitepoint ages ago. You'll find the same code on webdeveloper.com

Philip M
03-26-2012, 08:28 AM
LOL! Man, are you ever the detective, Philip!

Notice the evasive response! He is not prepared to deny that he is in fact bullant/webdev1958. If it talks like bullant, acts like bullant and smells like bullant, then it is bullant! Hopefully the mods will come out of their coma and chuck out this latest incarnation of the troll as well.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum