Can anyone help me please...

**harisx** · 01-30-2006, 05:17 AM

What needs to be change to make the images scroll from left to right but still in a continuous loop with no space between the first and last image as the present.

to view example:

http://www.nenganggrek.com/nessypic/scrollertop.htm

here's the code:

HTML Code:

<html>

<head>
<title>Scroller</title>
<Script>



var pic = new Array()

function banner(name, width, link){
	this.name = name
	this.width = width
	this.link = link
   }

pic[0] = new banner('thumb/70s-01.jpg',90,'nessy/70s-01.html')
pic[1] = new banner('thumb/70s-02.jpg',90,'nessy/70s-02.html')
pic[2] = new banner('thumb/70s-03.jpg',90,'nessy/70s-03.html')
pic[3] = new banner('thumb/80s-01.jpg',90,'nessy/80s-01.html')
pic[4] = new banner('thumb/80s-02.jpg',90,'nessy/80s-02.html')
pic[5] = new banner('thumb/travel-01.jpg',90,'nessy/travel-01.html')
pic[6] = new banner('thumb/travel-02.jpg',90,'nessy/travel-02.html')
pic[7] = new banner('thumb/travel-03.jpg',90,'nessy/travel-03.html')

var speed = 50

var kk = pic.length
var ii
var hhh
var nnn
var myInterval
var myPause


var imgArray = new Array(kk)
var myLeft = new Array(kk)

for (ii=0;ii<kk;ii++){
imgArray[ii] = new Image()
imgArray[ii].src = pic[ii].name
imgArray[ii].width = pic[ii].width

	hhh=0 
	for (nnn=0;nnn<ii;nnn++){
		hhh=hhh+pic[nnn].width
	}
	myLeft[ii] = hhh
}

function ready(){
	for (ii=0;ii<kk;ii++){ 
		if (document.images[ii].complete == false){
			return false	
			break
		}
	}
return true
}


function startScrolling(){
	if (ready() == true){		
		window.clearInterval(myPause)
		myInterval = setInterval("autoScroll()",speed)	
	}
}	
	

function autoScroll(){
	for (ii=0;ii<kk;ii++){
		myLeft[ii] = myLeft[ii] - 1
		
	if (myLeft[ii] == -(pic[ii].width)){
		hhh = 0
		for (nnn=0;nnn<kk;nnn++){
			if (nnn!=ii){
				hhh = hhh + pic[nnn].width
			}			
		}
		myLeft[ii] =  hhh
	}
		
		
		
		document.images[ii].style.left = myLeft[ii]
	}
}


</Script>

<body bgcolor='#FFFDCF'>
<Script>
for (ii=0;ii<kk;ii++){
document.write('<a href = ' + pic[ii].link + ' target="main" ><img space=0 hspace=0 vspace=0 border=0 height=80px style=position:absolute;top:0;left:' + myLeft[ii]  + '; src=' + pic[ii].name + '></a>')
}
myPause = setInterval("startScrolling()",3000)


</Script>



</body>

</html>

**jscheuer1** · 01-30-2006, 07:41 AM

Quite a bit:

Code:

<html>

<head>
<title>Scroller</title>

<script type="text/javascript">

//==============================================
//Copyright. All rights reserved.
//Alexander Babichev
//Free for private use "as is" under a condition that a copyright notice is preserved.
//==============================================


var pic = new Array()

function banner(name, width, link){
	this.name = name
	this.width = width
	this.link = link
   }

pic[0] = new banner('thumb/70s-01.jpg',90,'nessy/70s-01.html')
pic[1] = new banner('thumb/70s-02.jpg',90,'nessy/70s-02.html')
pic[2] = new banner('thumb/70s-03.jpg',90,'nessy/70s-03.html')
pic[3] = new banner('thumb/80s-01.jpg',90,'nessy/80s-01.html')
pic[4] = new banner('thumb/80s-02.jpg',90,'nessy/80s-02.html')
pic[5] = new banner('thumb/travel-01.jpg',90,'nessy/travel-01.html')
pic[6] = new banner('thumb/travel-02.jpg',90,'nessy/travel-02.html')
pic[7] = new banner('thumb/travel-03.jpg',90,'nessy/travel-03.html')

var speed = 50

var kk = pic.length
var ii
var hhh
var nnn
var myInterval
var myPause
var limit=0
for (var i_tem = 0; i_tem < kk; i_tem++)
limit+=pic[i_tem].width


var imgArray = new Array(kk)
var myLeft = new Array(kk)

for (ii=0;ii<kk;ii++){
imgArray[ii] = new Image()
imgArray[ii].src = pic[ii].name
imgArray[ii].width = pic[ii].width

	hhh=0 
	for (nnn=0;nnn<ii;nnn++){
		hhh=hhh+pic[nnn].width
	}
	myLeft[ii] = hhh
}

function ready(){
	for (ii=0;ii<kk;ii++){ 
		if (document.images[ii].complete == false){
			return false	
			break
		}
	}
return true
}


function startScrolling(){
	if (ready() == true){		
		window.clearInterval(myPause)
		myInterval = setInterval("autoScroll()",speed)	
	}
}	
	

function autoScroll(){
	for (ii=0;ii<kk;ii++){
		myLeft[ii] = myLeft[ii] + 1
		
	if (myLeft[ii] == limit)

		myLeft[ii] =  0		
		
		document.images[ii].style.left = myLeft[ii]
	}
}


</script>

<body bgcolor='#FFFDCF'>
<script type="text/javascript">

document.write('<div style="position:relative;left:-90px;overflow:hidden;width:'+limit+'px;height:80px;">')
for (ii=0;ii<kk;ii++){
document.write('<a href = ' + pic[ii].link + ' target="main" ><img space=0 hspace=0 vspace=0 border=0 height=80px style=position:absolute;top:0;left:' + myLeft[ii]  + '; src=' + pic[ii].name + '></a>')
}
document.write('</div>')
myPause = setInterval("startScrolling()",3000)

</script>



</body>

</html>

Note: If you like the images appearing and disappearing, remove the lines marked in red.

**harisx** · 01-30-2006, 08:47 AM

Thank You for Your help! it absolutely work now!

Thread: Can anyone help me please...

Thread Tools

Search Thread

Can anyone help me please...

Thank You

Bookmarks

Bookmarks

Posting Permissions