Picture horizontal scrolling Effect

Add divto body :

< div id "photo-list" ></ Div >

in JS write the onload method (domain,URLs) incoming image address and domain name, (Minimum of 5 pictures , showing 4 photos )

function initonloadaction (domain,urls,page_id) {

var id = function (EL) {

return document.getElementById (EL);

},

c = ID (' photo-list ');

generate a dynamic picture

var urllist=urls.split (",");

var imghtml= "<ul id= ' scroll ' >" ;

for (var i=0;i<urllist.length;i++) {

imghtml+= "<li> +domain+urllist[i]+ "' width= ' 160px ' height= ' 220px ' alt= '/></li> ' ;

}

imghtml+= "</ul>" ;

c.innerhtml=imghtml;

if (c) {

v AR &NBSP; ul  = id ( Span style= "font-family: ' Courier New '; Color:rgb (42,0,255); font-size:13px;" > ' scroll '

lis = ul . getElementsByTagName (' li '),

ItemCount = Lis.length,

width = lis[0].offsetwidth, // get each img width of the container

marquee = function () { 

C.scrollleft + = 2;

i F (c.scrollleft %  width<=1) {   / / when   c.scrollleft  and   width  img Append to the last side  

ul . appendchild (ulgetelementsbytagname (' li ') [0]);

C.scrollleft = 0;

};

},

Speed =; // The larger the number the slower

ul . style.width = Width*itemcount + ' px ' ;  // set container length after loading

var timer = setinterval (marquee, speed);

C.onmouseover = function () { 

Clearinterval (timer);

};

c.onmouseout = function () { 

Timer = setinterval (marquee, speed);

};

};

}

Adding style controls to CSS

#photo-list  {

/ * width of 4 pictures

*/

width:640px;

/ * highly consistent

*/

      height : 220px

Overflow:hidden;

}

/*  Add other Styles  */

#photo-list &NBSP; ul   &NBSP, list-style Span style= "font-family: ' Courier New '; Color:rgb (0,0,0); font-size:13px;" >: none

#photo-list &NBSP; li     : left

#photo-list img { Border:1px Solid #FFFFFF; background:#fff; padding:2px;}

Picture horizontal scrolling Effect