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;
 }
#outer {
    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 195
1 Afzaal Ahmad Zeeshan 132
2 ProgramFOX 130
3 Maciej Los 105
4 Sergey Alexandrovich Kryukov 75
0 OriginalGriff 6,564
1 Sergey Alexandrovich Kryukov 6,048
2 DamithSL 5,228
3 Manas Bhardwaj 4,657
4 Maciej Los 4,150


Advertise | Privacy | Mobile
Web04 | 2.8.1411022.1 | Last Updated 18 Apr 2013
Copyright © CodeProject, 1999-2014
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