Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: C# ASP.NET HTML
I am using a <marquee> tag for continues moving of image horizontally.suppose i have a 5 images than it moving fine but after completion of last image move there is a big gap to start scrolling from 1 st image.How can i mange this?

i have this code for continues image slider but is not working properly
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
 
<base href="http://www.coothead.co.uk/images/">
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
 
<title></title>
 
<style type="text/css">
body {
    background-color:#000;
    background-image:url(gradient.jpg);
    background-repeat:repeat-x;
 }
<h1>outer {</h1>
 
<pre>
position:relative;
display:none;
border-top:5px solid #333;
border-right:5px solid #999;
border-bottom:5px solid #999;
border-left:5px solid #333;
margin:40px auto 0;
overflow:hidden;
background-color:#fff;

}

inner0,#inner1 {

 
position:absolute;
padding:8px 0;
border-top:2px solid #000;
border-bottom:2px solid #000;

}

inner0 img,#inner1 img {

 
float:left;
padding:4px;
border-top:2px solid #000;
border-right:2px solid #666;
border-bottom:2px solid #666;
border-left:2px solid #000;
margin:0 4px;
background-color:#ccc;
cursor:pointer;

}
</style>

<script type="text/javascript">

var preloads=[];

function preload(){
for(var c=0;c<arguments.length;c++) {
preloads[preloads.length]=new Image();
preloads[preloads.length-1].src=arguments[c];

}

}
preload('anim.gif','anim1.gif','anim2.gif',
'anim3.gif','anim4.gif','anim5.gif'); /* add your images here*/

function init(){

url=['#','#','#','#','#','#']; /* add your links here */

speed=20; /* this is the scroll speed /
boxWidth=4/preloads.length; /
this is the scroller box width controller */

pic=[];
anc=[];
dv=[];
obj1=document.getElementById('outer');

for(i=0;i<2;i++) {
dv[i]=document.createElement('div');
dv[i].setAttribute('id','inner'+i);
for(c=0;c<preloads.length;c++) {
pic[c]=document.createElement('img');
pic[c].setAttribute('src',preloads[c].src);
anc[c]=document.createElement('a');
anc[c].setAttribute('href',url[c]);
anc[c].appendChild(pic[c]);
dv[i].appendChild(anc[c]);
}
obj1.appendChild(dv[i])
}
obj1.style.display='block';

obj2=document.getElementById('inner0');
obj3=document.getElementById('inner1');

k=obj3.offsetWidth;

obj2.style.width=obj3.style.left=
obj3.style.width=k+'px';

obj1.style.width=k*boxWidth+'px';
obj1.style.height=obj2.offsetHeight+'px';

j=0;
n=k;

scroll();

obj1.onmouseover=function(){
clearTimeout(scroller);

}

obj1.onmouseout=function(){
return scroll();
}
}

function scroll() {
if(j==-n){
j=n;
}
j--;
if(k==-n){
k=n;
}
k--;

obj2.style.left=j+'px';
obj3.style.left=k+'px';

scroller=setTimeout(function(){scroll()},speed);
}
if(window.addEventListener){
window.addEventListener('load',init,false);
}
else {
if(window.attachEvent){
window.attachEvent('onload',init);
}
}
</script>

</head>
<body>

<div id="outer"></div>

</body>
</html>
Posted 18-Apr-13 3:12am
Edited 18-Apr-13 3:21am
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
0 OriginalGriff 490
1 Sergey Alexandrovich Kryukov 325
2 ProgramFOX 265
3 Maciej Los 245
4 Andreas Gieriet 200
0 OriginalGriff 465
1 Sergey Alexandrovich Kryukov 275
2 ProgramFOX 265
3 Maciej Los 245
4 Andreas Gieriet 200


Advertise | Privacy | Mobile
Web04 | 2.8.150331.1 | Last Updated 18 Apr 2013
Copyright © CodeProject, 1999-2015
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100